图像在 Chrome 中不会缩小

Question

我无法理解为什么当我缩小/调整 Chrome 大小时我的图片没有缩小。有人可以解释并帮助我吗？ 我已经尝试了一段时间，但我似乎无法弄清楚或在其他地方找到答案。图像在我的本地主机上运行的 Firefox 中缩小，但不在 jsfiddle 内。仍然无法在 Chrome (57.0.2987.110) 中工作。

<div class="page">
<div class="container">
    <div class="title">
        <H1>FLEXBOX PRACTICE</H1>
    </div>
    <div class="content">
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="images">
            <img src="http://www.placebacon.net/1280/720" alt="Bacn">
        </div>
    </div>      
</div>

body {
    margin: 0;
}
p {
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 72px;
    margin: 20px 0;
}
.page {
    width: 100vw;
    height: 100vh;
    background-color: pink;

}
.container {
    margin: 0 auto;
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content {
    display: flex;
    justify-content: space-between;
    height: 80vh;
    width: 60vw;
    align-items: center;
    background-color: salmon;
}
    .text {
        flex-grow: 0;
        padding: 10px 20px 10px 20px;
        background-color: red;
        color: white;
        border-radius: 10px;

        width: 340px;
        font-size: 24px;
        font-family: verdana;
    }
    .images {
        display: flex;
        align-items: center;
        flex-grow: 1;
        flex-shrink: 1;         
        max-width: 600px;
        width: 600px;
        background-color: yellow;
    }
        .images img {           
            display: flex;
            flex-grow: 1;
            flex-shrink: 1;
            max-width: inherit;
            width: inherit;
        }

https://jsfiddle.net/xb4obfce/

Answer 1

您告诉图像继承其父级的宽度，即 600 像素。

将 .images 类更改为 width: 100%;应该让它响应。