Question

我有几个div和像这样的图像

<div class="show-image">
    <div class="image-info-box">
        <div class="info-content">test</div>
    </div>
    <div class="image-container">
        <img class="img-box" src="image.png" />
    </div>
</div>

和css文件是：

.show-image {
    display: inline-block;
    vertical-align: top;
}

.img-box {
    padding-top: 30px;
    width: 75%;
    text-align: center;
    display: block;
}

.image-container {
    display: inline-block;
    white-space: nowrap;
    width: auto;
}

.image-info-box {
    width: 100%;
    padding-top: 30px;
    text-align: center;
}

.info-content {
    float: center;
}

我希望图像的宽度为75％，因此我将img-box类的宽度设置为75％（例如图像宽度为1008px，因此img-box的宽度为756px）。问题是为什么带有类图像容器的div仍然保持原始图像宽度，即该示例的1008px。图像容器如何使其宽度适合img-box？

Answer 1

将限制宽度应用于父级，而不是子级。这样它就会像你期望的那样工作。

.image-container {
display: inline-block;  
width:75%;
}

.image-info-box {
width: 100%;
padding-top: 30px;
text-align: center;
}

DEMO

Answer 2

只使用div（没有图片标签），你可以这样做。

<div class="show-image">
    <div class="image-info-box">
        <div class="info-content">test</div>
    </div>
    <div class="image-container">
    </div>
</div>

使用此CSS。

.image-container {
    display: inline-block;
    white-space: nowrap;
    width: auto;
    background: url('Hopetoun_falls.jpg') no-repeat;
    width: 500px;
    height: 500px;
    background-size: 100%;
}

为什么父div仍然保持其子图像原始宽度的宽度？

2 个答案: