Question

如果我在css中宽度设置为100％的页面上有图像，则它与浏览器一样宽。精细。但是，如果我使包含div显示：inline-block，则图像不再设置为宽度：100％。相反，它只显示为图像的实际宽度：

＆＃13;

img {width:100%;}

＆＃13;

<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>

<div style="display:inline-block;">
  <img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>

＆＃13;

所以，基本上，包含div的内联块希望与其内容一样宽，并且图像上的宽度：100％想要与包含元素一样宽，所以看起来它们既困惑又只是默认为图像的宽度。我知道我可以将包含div的宽度设置为100％并具有所需的结果，但对于我实际在做的事情，这不是一个选项。有没有办法强制img 100％宽度只有图像本身的CSS？我想我基本上是想在一个元素的父元素上设置一个类，我认为这不可能......想法？

Answer 1

这是因为width上的百分比值是相对于包含框的宽度。虽然块级容器（例如<div>元素）占用其包含块的整个宽度，但内联级元素却不占用。

因此，您必须明确指定包装器<div>的宽度。作为一个拇指规则，当你说100%时，你应该问自己100%什么？

img { width:100%; }
div { display:inline-block; width: 100%; }

<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
  <img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>

或者，如果要将元素的宽度设置为视口/窗口的宽度，则可以使用 viewport percentage units 。例如：

img { width: 100vw; } /* 1vw = 1/100 of the width of the viewport */

演示：

img { width: 100vw; }

<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
  <img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>

Answer 2

我不认为这会对您的问题有所帮助，但从技术上讲，您可以通过提供position:absolute;

来实现

    img {
        width:100%;
    }

    div img {
        position:absolute;
        margin:0 auto;
        width:100% !important;
    }

http://jsfiddle.net/kjf8s3rq/

Answer 3

问题在于您尝试以与其预期用途相反的方式使用dislay-inline。如果您希望图像占据窗口的整个宽度，那么显然它的容器也必须占据整个宽度。这意味着您希望div的行为类似于块元素。所以解决方案就是要做到这一点并将div保留为display:block（其默认值为开头），或者至少必须将其宽度设置为width:100%。毕竟，如果你想占据屏幕的整个宽度，那么你希望它成为一个区块。

内联块元素必须设置其宽度，方法是在CSS中指定宽度，或者让它们占用保存其内容所需的宽度。在你的情况下，图像具有自然的大小，因此你周围的内联块div正占据那个大小，而不是更多。

设置宽度：图像上的100％不会改变;只是告诉它充分利用其容器，而不是整个窗口。但是你的包含div已经是图像的自然尺寸了。

在内联块元素内制作图像宽度：100％

3 个答案: