响应css宽度与％(responsive css width with %)

响应css宽度与％(responsive css width with %)

我是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

Im a beginner in css, and i have tried to find the answer in ebook and google, but i couldnt find it. So please bear with me :D

I want to create a responsive web, so this is my meta tag :

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

This is a part of my code, which containt an image with a big width :

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

To make this image fit with the current screen, i tried to make it as big as the current screen's width with the css. However, the following code is NOT working :

#desc { width: 100%; }

So, i tried this css and its working :

#desc img { width: 100%; }

My question is, why the first css code is not working?it should be same as the second one. Is it related to the %?or the meta tag i have above?

Thaks for your time :D

最满意答案

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

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

with the first css rule you're assigning a width of 100% to the div element (which is already 100% wide by default, as a block element) but the image is an inline-replaced element by default, thus it won't extend its width.

In the second rule you're assigning instead the width to the image, so the resulting effect is to stretch the image.