CSSフレックスボックスとイメージリサイズ

私は実際にフレックスボックスで遊んでいますが、アダプティブ幅を持つコンテナ内のイメージのサイズを変更するためにアーカイブすることはできません。またhttps://plnkr.co/edit/QaPzOVXSx5iYQXOsit9V?p=preview CSSフレックスボックスとイメージリサイズ

ダイレクトプレビュー：

<!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>

そして、私は何をしたいの画像：

また、ここでは、このコードのplunkerある

だから私は画面が小さくなると、緑色のコンテナで自分のイメージのサイズを変更したい。

どうすればいいですか？

ありがとうございます！ =）

出典

2017-11-16 Lucsartes

あなたはそれを私にビート...

 <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>

出典

2017-11-16 16:30:33 LGSon

うんスニペットimg

スタックにwidth: 100%;を追加する必要があります:) – LOTUSMS

CSSフレックスボックスとイメージリサイズ

答えて

関連する問題