内联块元素内的图像宽度：100％ [英] Making an image width:100% inside a inline-block element

问题描述

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

If I have an image on a page with width set to 100% in css it is as wide as the browser. Fine. However, if I make a containing div have display:inline-block, then the image is no longer set to have a width:100%. Instead, it just shows as the actual width of the image:

img {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 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>

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

So, basically, the inline-block containing div wants to be as wide as its contents, and the width:100% on the image wants to be as wide as the containing element, so it seems they are both confused and just defaulting to the width of the image. I know I can set the width of the containing div to be 100% and have the desired outcome, but for what I am actually doing, that is not an option. Is there any way to force the img to be 100% width with only css on the image itself? I guess I am basically trying to set a class on a parent of an element, which I do not think is possible... Ideas?

推荐答案

这是因为 width 相对于盒子包含块的宽度。虽然块级容器（例如< div> 元素）占据了其包含块的整个宽度，但是内联级元素却没有。

This is because a percentage value on width is relative to the width of the box's containing block. While a block-level container (<div> element, for instance) takes the entire width of its containing block, an inline-level element doesn't.

因此，您必须明确指定包装器< div> 的宽度。根据经验，当您说 100％时，应该问自己 100％是什么？

Therefore you have to specify the width of the wrapper <div> explicitly. As a thumb rule, when you say 100% you should ask yourself 100% of what?

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>

或者，如果要将元素的宽度设置为视口/窗口的宽度，则可以使用 视口百分比单位 。例如：

Alternatively, in cases where you want to set the width of elements as the width of the viewport/window, you could use viewport percentage units instead. For instance:

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

Demo：

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>

这篇关于内联块元素内的图像宽度：100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！