如何在html css中对图像使用division-class？

Question

我正在学习编码...新手。

在html中：case1我在div中创建了一个类

`

`

在html中：case2我在img语法中创建了一个类

'

`

在 CSS 中：我设置根据需要调整图像大小或设置图像格式：

` .image { 宽度：100px； 高度：自动； }`

结果：case1 => 不起作用；而case2它起作用了。

我想问是否有关于将类放置在图像标签内与将类放置在图像标签内的div中时的差异的解释...如上面的示例。非常感谢！ PS：如果有语法错误或拼写错误，请忽略...点这里是我放置类的地方。

Answer 1

在第一种情况下，您将“图像”div 的宽度设置为 100 像素，实际上，该 div 的宽度为 100 像素（如果您使用开发工具并检查该 div，您可以看到“图像”div 中的宽度仅为 100 像素） width），但这并不意味着子元素（在本例中为“img”）继承与父元素相同的宽度。如果你想让图像继承其父div的宽度，

.image img {
 width:100%;
 height:auto;
}

这里我们使“image”div 内的“img”具有其父级的 100% 宽度（即 100px）。