在 inline-block 元素内制作图像宽度：100%答案

【问题标题】：Making an image width:100% inside a inline-block element在 inline-block 元素内制作图像宽度：100%
【发布时间】：2014-11-05 09:40:03
【问题描述】：

如果我在页面上的图片在 css 中宽度设置为 100%，则它与浏览器一样宽。美好的。但是，如果我让包含的 div 具有 display:inline-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 的 inline-block 想要与其内容一样宽，而图像上的 width:100% 想要与包含元素一样宽，所以看起来他们既困惑又只是默认为图片的宽度。我知道我可以将包含 div 的宽度设置为 100% 并获得所需的结果，但对于我实际在做的事情，这不是一个选项。有什么方法可以强制 img 为 100% 宽度，而图像本身只有 css？我想我基本上是在尝试在元素的父级上设置一个类，我认为这是不可能的......想法？

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

我认为这不是一个选项
@Adrian 唯一可能的解决方案是使用vw 长度。刚刚更新了答案。

【解决方案2】：

我认为这对您的问题没有帮助，但从技术上讲，您可以通过 position:absolute; 来解决问题

    img {
        width:100%;
    }

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

http://jsfiddle.net/kjf8s3rq/

【讨论】：

【解决方案3】：

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

内联块元素必须设置它们的宽度，要么通过在 CSS 中指定宽度，要么让它们占据所需的宽度以容纳其内容。在您的情况下，图像具有其自然大小，因此您周围的 inline-block div 仅占用该大小，仅此而已。

在图像上设置 width:100% 不会改变这一点；这只是告诉它占用其容器的全部内容，而不是整个窗口。但是你包含的 div 已经是图像的自然大小了。

【讨论】：