0

我是 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 使其与当前屏幕的宽度一样大。但是，以下代码不起作用：

#desc {
    width: 100%;
}

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

#desc img {
    width: 100%;
}

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

谢谢你的时间：D

4

4 回答 4

4

#desc匹配<div>并且不影响<img>。

于 2013-06-21T16:08:27.877 回答
2

使用第一个 css 规则，您为 div 元素分配了 100% 的宽度（默认情况下它已经是 100% 宽，作为块元素）但图像默认是内联替换元素，因此它不会扩大其宽度。

在第二条规则中，您改为为图像分配宽度，因此产生的效果是拉伸图像。

于 2013-06-21T16:09:38.353 回答
1

第一个 CSS 片段说带有 id 的元素desc应该有 100% 的宽度。第二个表示img具有 id 的元素内部的元素desc应具有 100% 的宽度。如果您对第一个片段进行一些其他修改，例如，为带有 id 的元素添加背景颜色desc，您会看到它（带有 id 的元素desc）确实受到 CSS 的影响；它有 100% 的宽度。

于 2013-06-21T16:09:03.763 回答
1

首先，您制作 container 的宽度div 100%。但是width属性不是inherited（与其他一些 css 属性不同），所以img不是100%第一个。

在第二个中，你做了widthof img 100%。父元素取width子元素。而且，div是块元素，所以容器div也是100%，连同img标签。

于 2013-06-21T16:10:48.813 回答