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

如果我在css中宽度设置为100％的页面上有图像，它与浏览器一样宽。精细。但是，如果我使一个包含div具有display：inline-block，则图像不再设置为具有宽度：100％。相反，它只是示出了作为图像的实际宽度：在行内块元素内制作图像宽度：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希望一样宽是作为其内容，并且宽度：100图像上的％想要与包含的元素一样宽，所以看起来它们都是混淆的，只是默认图像的宽度。我知道我可以将包含div的宽度设置为100％并获得期望的结果，但对于我实际做的事情，这不是一个选项。有没有什么办法强制img是100％的宽度，只有图像本身的CSS？我想我基本上是试图在一个元素的父类上设置一个类，我认为这是不可能的......思想？

来源

2014-11-05 ruprict

这是因为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>

来源

2014-11-05 00:46:21

我认为这不是一个选项 – Adrian 2014-11-05 00:48:01

@Adrian唯一的其他可能的解决方案是使用'vw'长度。刚更新了答案。 – 2014-11-05 01:02:39

我不认为这将有助于您的问题，但在技术上你可以给它position:absolute;

img { 
     width:100%; 
    } 

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

做

http://jsfiddle.net/kjf8s3rq/

来源

2014-11-05 01:00:11 Adrian

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

行内块元素必须设置其宽度，方法是在CSS中指定宽度，或者让它们占据需要保留其内容的宽度。在你的情况下，图像有其自然尺寸，因此你的周围内嵌块div只占用这个尺寸，不会再多。

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

来源

2014-11-05 01:40:03 GuyH

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

回答

相关问题