CSS FlexBox und Bildgröße ändern

Ich spiele eigentlich mit Flexbox, und ich kann nicht archivieren, um ein Bild in einem Container mit einer adaptiven Breite zu skalieren.CSS FlexBox und Bildgröße ändern

Auch hier ist ein Plunker für diesen Code: https://plnkr.co/edit/QaPzOVXSx5iYQXOsit9V?p=preview

Auch eine direkte Vorschau:

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
    </head> 
 
    <body> 
 
     <div style="display: flex; flex-direction: row; height: 800px"> 
 
      <div style="width: 1000px; background-color: lightpink;"></div> 
 
      <div style="flex: auto; 
 
         background-color: lightgreen; padding: 10px; 
 
         display: flex; flex-direction: column; justify-content: center; 
 
         min-width: 100px; max-width: 200px;"> 
 
       <div style="max-width: 200px; opacity: 0.5"> 
 
        <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="max-width: 200px; height: auto"> 
 
       </div> 
 

 
       <div style="max-width: 200px; opacity: 0.5"> 
 
        <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="max-width: 200px; height: auto"> 
 
       </div> 
 

 
       <div style="max-width: 200px; opacity: 0.5"> 
 
        <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="max-width: 200px; height: auto"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

Und ein Bild von dem, was ich tun möchte:

Also ich möchte, dass mein Bild die Größe im grünen Container ändert, wenn der Bildschirm kleiner wird.

Wie kann ich das tun?

Danke! =)

Quelle

2017-11-16 Lucsartes

Sie müssen width: 100%; zum img

Stapel Snippet

 <div style="display: flex; flex-direction: row; height: 800px"> 
 
      <div style="width: 1000px; background-color: lightpink;"></div> 
 
      <div style="flex: auto; 
 
         background-color: lightgreen; padding: 10px; 
 
         display: flex; flex-direction: column; justify-content: center; 
 
         min-width: 100px; max-width: 200px;"> 
 
       <div style="max-width: 200px; opacity: 0.5"> 
 
        <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="width: 100%; max-width: 200px; height: auto"> 
 
       </div> 
 

 
       <div style="max-width: 200px; opacity: 0.5"> 
 
        <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="width: 100%; max-width: 200px; height: auto"> 
 
       </div> 
 

 
       <div style="max-width: 200px; opacity: 0.5"> 
 
        <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="width: 100%; max-width: 200px; height: auto"> 
 
       </div> 
 
      </div> 
 
     </div>

Quelle

2017-11-16 16:30:33 LGSon

yup hinzuzufügen ... schlagen mich, um es :) – LOTUSMS

CSS FlexBox und Bildgröße ändern

Antwort

Verwandte Themen