css - 制作一个宽度为:100% inside a inline-block element的图片

Question

如果我在页面上有一个图像，其宽度在 css 中设置为 100%，则它与浏览器一样宽。美好的。但是，如果我使包含的 div 具有显示:内联 block ，则图像不再设置为具有宽度:100%。相反，它仅显示为图像的实际宽度:

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 的内联 block 想要和它的内容一样宽，而图像上的 width:100% 想要和包含元素一样宽，所以看起来他们既困惑又只是默认为图像的宽度。我知道我可以将包含的 div 的宽度设置为 100% 并获得所需的结果，但对于我实际所做的，这不是一个选项。有没有办法强制 img 为 100% 宽度，图像本身只有 css？我想我基本上是在尝试在元素的父元素上设置一个类，我认为这是不可能的……想法？

Answer 1

这是因为 width 上的百分比值是相对于框的包含 block 的宽度。 block 级容器(例如 <div> 元素)占用其包含 block 的整个宽度，而内联级元素则不会。

因此您必须指定包装器的宽度 <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)/窗口的宽度，您可以使用 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>