带有 flexbox 的响应式 img答案

【问题标题】：Responsive img with flexbox带有 flexbox 的响应式 img
【发布时间】：2017-03-22 06:44:36
【问题描述】：

您好，感谢任何回复此帖子的人。

我已经用锚标记包裹了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>

【问题讨论】：

尝试给锚min-width: 0。 stackoverflow.com/q/36247140/3597276
恐怕没工作。谢谢你的链接，读起来很有趣。
能否请您创建一个带有示例的 sn-p 以便我们提供帮助？
添加了一个 sn-p :)

标签： html image css flexbox

【解决方案1】：

图像不会缩小，因为图像不受 flex-item 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>

【讨论】：

【解决方案2】：

将第二张图片包裹在 a 标签内（它在你的标记中的 a 标签外），即

<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%;
}

【讨论】：