在行內塊元素內製作圖像寬度：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％

回答

相關問題