Question

嗨，感谢有人回复此帖。

我已使用锚标记包裹img，并且随着页面大小调整，img不再缩小。我知道flexbox只将flex属性应用于子元素，因此用img包装锚会使它成为孙子。但即使将柔性应用于锚点，图像仍然无法收缩。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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

响应img与flexbox

2 个答案: