与flexbox响应img

嗨，谢谢任何人回复这篇文章。与flexbox响应img

我用一个锚标签包装了img，并且img不再在页面调整大小时收缩。我知道flexbox仅将flex属性应用于子元素，因此使用锚点包装img会使其成为孙子。但即使将Flex应用到锚点，图像仍然无法缩小。

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

来源

2016-11-08 Gelgamek

尝试赋予anchor'min-width：0'。 http://stackoverflow.com/q/36247140/3597276 –

没有工作我害怕。感谢您的链接，虽然是一个有趣的阅读。 – Gelgamek

你能否请用一个例子创建一个片段，以便我们可以提供帮助？ –

的图像不限制于柔项a图像没有萎缩 - 仅仅使用：

a img{ 
    width: 100%; 
}

现在img将尊重尺寸的a。请参阅here for more info了解我们如何限制图像的尺寸，而不会影响固有的aspect-ratio。

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

来源

2016-11-09 09:33:11 kukkuz

包裹标签内的第二图像（它在你的标记的标签外），即

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

，并应用以下CSS。

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

来源

2016-11-09 09:53:53

与flexbox响应img

回答

相关问题