自動調整圖像大小以填充div

Question

我在div內有一個圖像，需要盡可能大。 我嘗試使用width: 100%和height: 100%並且對max-width和max-height相同，但這沒有用。 這些圖像不起作用的原因是因為我的圖像大小各異，有些又高又有些寬。 有沒有一種方法可以調整圖像的大小，以使其盡可能寬而不會使div高度增加？

基本上： width:100%除非它使height大於100％，在這種情況下，我想使用height:100% 。

Answer 1

您可能要使用object-fit: cover; 圖片的CSS規則。

這幾乎等同於background-size：如果使用背景，則覆蓋。

擔心規則會“裁剪”圖像的某些部分，具體取決於比例。

更新：如果您不想從圖像中裁剪任何內容，則可以使用height:inherit; 並以某種方式定位您的圖像以適合所有樣式（也許居中）

這樣可以保持比例，並盡可能擴大寬度。

Answer 2

如果設置了width或height中的一個（不是兩者都設置），則未明確設置的width或height將自動調整以使圖像保持正確的比例。 擁有響應式圖像（一個縮放到其父元素大小的圖像）所需要做的只是簡單地設置以下任一 （而不是全部）：

width:100%;

height:100%;

而且，當然，父元素還必須具有響應的width或height 。 如果父母永遠無法調整大小，那么孩子永遠也不會調整大小。

為了確保height永遠不會超過某個特定值，那就是在圖像上使用max-height ，或者僅在圖像容器上使用height和overflow 。

這是一個例子：

 #container { display:flex; } div:not(#container){ width:25%; height:100px; border:1px solid black; overflow:hidden; /* ensure height is consistent */ } /* Comment the following out temporarially to see the native image sizes */ img { width:100%; } 

 <div id="container"> <div><img src="https://static1.squarespace.com/static/54e8ba93e4b07c3f655b452e/t/56c2a04520c64707756f4267/1493764650017/"></div> <div><img src="http://static.boredpanda.com/blog/wp-content/uploads/2016/08/cute-kittens-30-57b30ad41bc90__605.jpg"></div> <div><img src="https://lh3.googleusercontent.com/fa44expvfZrMe6nIG7n_7mblJJbI1FGaAJledcdzZjaLPzntm2rUWr2_4xxRXGadre41CdqyGHE=s640-h400-e365"></div> <div><img src="https://fthmb.tqn.com/INZEtkWYEpsZaksoewT_mA4DREo=/960x0/filters:no_upscale()/about/Two-kittens-GettyImages-559292093-58822e4f3df78c2ccd8b318c.jpg"></div> <div><img src="https://i.ytimg.com/vi/w6DW4i-mfbA/hqdefault.jpg"></div> </div> 

Answer 3

一種更優雅的解決方案是設置div的大小，然后將其背景設置為url(foo) cover 。 如果需要，可以將邊緣切掉。 使用contain代替cover做到這一點，但是不會切掉邊緣。

編輯：每個注釋，我建議使用object-fit: contain 。 無需因我的建議而反對使用背景圖像。

Answer 4

據我了解，無論大小如何，您都需要使用圖片填充div嗎？

1. 給<div>容器指定所需的寬度和高度 。
2. 賦予<img>元素width：100％ 。

高度將自動調整。

3. 如果要讓圖像彼此換行，請在<div>容器上使用display：flex屬性。