フレックスボックスを使用した応答性の高い画像

Question

こんにちは、この投稿に返信いただきありがとうございます。

アンカータグでimgをラップしました。imgは、ページのサイズが変更されても縮小されなくなりました。私はflexboxが子供の要素にflexプロパティを適用するだけなので、imgをアンカーでラップすると、それが孫になることはわかっています。しかし、アンカーにフレックスを適用しても、イメージはまだ縮小されません。

.rightContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-between; 
 
    background: #375D81; 
 
} 
 

 
.leftContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: #183152; 
 
}

<div class="rightContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor </p> 
 
     <a href="https://color.adobe.com/explore/most-popular/?time=all"> 
 
      <img src="http://placehold.it/350x150" alt="" /></a> 
 
    </div> 
 

 
    <div class="leftContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor</p> 
 
     <a href="http://lorempixel.com/"></a><img class="right " src="http://placehold.it/350x150" alt="" /> 
 
    </div>

Answer 1

画像がフレックス項目aに制約されないように画像が縮小されていない - ちょうどこの使用：

a img{ 
    width: 100%; 
} 

を、現在img寸法を尊重しaです。組み込みのaspect-ratioに影響を与えずに画像のサイズを制限する方法については、here for more infoを参照してください。

.rightContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-between; 
 
    background: #375D81; 
 
} 
 

 
.leftContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: #183152; 
 
} 
 
a img{ 
 
    width: 100%; 
 
}

<div class="rightContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor </p> 
 
     <a href="https://color.adobe.com/explore/most-popular/?time=all"> 
 
      <img src="http://placehold.it/350x150" alt="" /></a> 
 
    </div> 
 

 
    <div class="leftContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor</p> 
 
     <a href="http://lorempixel.com/"><img class="right " src="http://placehold.it/350x150" alt="" /></a> 
 
    </div>

Answer 2

すなわち

<a href="http://lorempixel.com/"><img class="right" src="http://placehold.it/350x150" alt="" /></a> 

、（それはあなたのマークアップタグ外です）タグ内に第2の画像をラップして、以下のCSSを適用します。

.leftContent a img, 
.rightContent a img{ 
    max-width:100%; 
}