Question

我是css的初学者，我试图在电子书和谷歌中找到答案，但我找不到它。所以请耐心等待：D

我想创建一个自适应网络，因此这是我的meta标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

这是我的代码的一部分，它包含一个宽大的图像：

<div id="desc">
        <img alt="" src="images/MallDetail/MallDesc.png">
</div>

为了使图像适合当前屏幕，我尝试使用css使其与当前屏幕的宽度一样大。但是，以下代码 NOT 正在运行：

#desc {
    width: 100%;
}

所以，我试过这个css及其工作：

#desc img {
    width: 100%;
}

我的问题是，为什么第一个css代码不起作用？它应该与第二个相同。它与我上面的％？或meta标签有关吗？

你的时间：D

Answer 1

#desc与<div>匹配，不会影响<img>。

Answer 2

使用第一个css规则，你为div元素指定了100％的宽度（默认情况下已经是100％宽，作为块元素）但是默认情况下图像是内联替换元素，因此它不会延长其宽度。

在第二个规则中，您将宽度指定给图像，因此产生的效果是拉伸图像。

Answer 3

第一个CSS代码段表示标识为desc的元素的宽度应为100％。第二个说，标识为img的元素内的desc元素的宽度应为100％。如果您对第一个代码段做了一些其他修改，例如，为ID为desc的元素添加背景颜色，您会看到它（ID为desc的元素）确实受到了影响CSS;它有100％的宽度。

Answer 4

首先，您创建容器div 100%的宽度。但width属性不是inherited（与其他一些css属性不同），因此img在第一个属性中不是100%。

在第二个问题中，您制作了width img的{{1}}。父接受子元素的100%。而且，width是块元素，因此容器div也是div以及100%标记。

响应css宽度与％

4 个答案: