Question

我已经多次遇到过这个问题，我修复它的方法是在html上声明img时添加宽度和高度，如下所示：

<img src="outside.jpg" width="375px" height="375px">

但是，如果我这样做，它将不尊重父母div

<div class="imgBox">
     <img src="outside.jpg">
</div>

CSS parent div

.imgBox{
    height: 375px;
    width: 375px;
    border: 1px solid red;
    margin-right: 20px;
}

为什么会这样？为什么img忽略了他们的父母大小？

Answer 1

这是一个HTML / CSS问题，孩子的大小不是由他父母的大小来定义的。这是由于高度和宽度的默认值。在CSS中，高度和宽度的默认值为：

img{
    height: auto;
    width: auto;
}

auto让浏览器计算出身高，因此不是最佳方式。

对于更干净的代码，使用height: inherit;和宽度width: inherit;，允许子项从其父元素继承此属性

Answer 2

如果未设置不同的尺寸，则图像元素始终具有显示图像的大小。

添加此css：

.imgBox img {
    width: 100%;
    height: auto;
    display: block;
}

Answer 3

.imgBox img {
    max-width: 100%;
    max-height: 100%;
}

所以img永远不会比其父母大。

Answer 4

你必须使用img url添加类内联，如下所示：

<img src="outside.jpg" class="imgBox">