Responsive img mit flexbox

Question

Hallo und danke an alle, die auf diesen Beitrag antworten.

Ich habe eine img mit einem Anker-Tag gewickelt und die img nicht mehr verkleinert, wie die Größe der Seite geändert wird. Ich weiß, dass flexbox Flex-Eigenschaften nur auf untergeordnete Elemente anwendet, also würde das Umschließen des img mit einem Anker es zu einem Enkel machen. Aber selbst wenn Flex auf den Anker angewendet wird, schrumpft das Bild immer noch nicht.

.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

Das Bild schrumpft nicht, da das Bild nicht auf die Flex-Element beschränkt ist a - nur diese verwenden:

a img{ 
    width: 100%; 
} 

und jetzt die img werden die Dimensionen respektieren von a. Siehe here for more info, um zu sehen, wie wir die Abmessungen von Bildern beschränken, ohne die intrinsische aspect-ratio zu beeinflussen.

.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

Wickeln Sie das zweite Bild im einem Tag (es ist in Ihrem Markup außerhalb des einen Tag ist), dh

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

und die folgende CSS anwenden.

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