如何將容器的寬度限制爲X，當它包含更寬（> X）的圖像時？

-1

我需要我的div元素與屏幕一樣寬，即使它的子圖像元素比這更寬。那可能嗎？我試圖在overflow: hidden無效。如何將容器的寬度限制爲X，當它包含更寬（> X）的圖像時？

<div> 
    <img src="image.jpg"> 
</div>

來源

2017-06-06 drake035

將最大寬度設置爲視口寬度的99％ - 最大寬度：99vw; – Simon

將div設置爲'max-width：100％'和'overflow：hidden'。 –

作品，謝謝！你能回答我的問題嗎？ – drake035

我不知道你的HTML，所以這個答案可能不是唯一的/最好的方式。

擁有overflow: hidden只是讓您的div隱藏任何內容「溢出」的框。但是，默認情況下，div會有width: auto，這使得div伸展以容納它擁有的任何子元素。

只需加入max-width: 100%，即可強制div停止增長超過其父項的寬度。這樣div就會試圖爲了孩子而拉伸，但還不夠遠，不足以抵擋其父母。

在你的情況下，圖像試圖拉伸div比它應該更多，所以overflow: hidden進場並隱藏圖像的部分超過div的寬度。

來源

2017-06-06 20:43:07

用「爲了它的孩子，但不夠遠，以至於違背它的父母」的好措辭:) – drake035

您可以使用以下方法：

div { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
div img { 
 
    width: inherit; 
 
    height: inherit; 
 
    background-size: cover; 
 
}

<div> 
 
    <img src="http://placehold.it/1600" /> 
 
</div>

來源

2017-06-06 19:55:48 Gerard

'背景圖像：封面;'混淆了我......那是爲什麼？ –

哎呀，錯字。我會解決它。封面告訴瀏覽器確保圖像始終覆蓋整個容器，即使它必須拉伸圖像或從其中一個邊緣稍微切掉一點。 – Gerard

在你的CSS文件

img { 
    height:auto; 
    max-width:100%; 
}

來源

2017-06-06 19:56:54

如何將容器的寬度限制爲X，當它包含更寬（> X）的圖像時？

回答

相關問題