Question

我无法理解为什么在缩小/调整Chrome浏览器时，我的图片不会缩小。有人可以解释并帮助我吗？我已经尝试了一段时间，但我似乎无法弄明白或在其他地方找到答案。在我的localhost上运行的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

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

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

Chrome中的图片不会缩小

1 个答案: