自動調整圖像填充div

我有一個圖像裏面的div，我需要儘可能大。我嘗試過使用width: 100%和height: 100%，max-width和max-height也是如此，但這種方法沒有奏效。這些不起作用的原因是因爲我的圖像是不同的大小，有些高大一些。有沒有辦法讓圖像調整大小，以便在沒有高度擴展div的情況下儘可能地擴大圖像大小？自動調整圖像填充div

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

來源

2017-07-24 Jake P

如果您需要圖片大小受父母身高和*寬度的限制，您可以考慮使用背景圖片並將其設置爲[background-size]（https://developer.mozilla.org/en- US/docs/Web/CSS/background-size）來「包含」。 – showdev

一個更優雅的解決方案是設置div的大小，然後將其後臺url(foo) cover。如果需要的話，這會切掉邊緣。使用contain而不是cover也是如此，但不會切斷邊緣。

編輯：根據意見，我建議使用object-fit: contain。沒有必要對我的建議使用背景圖像低估。

來源

2017-07-24 20:55:55 jhpratt

img元素不是背景。 –

然後你可以使用'object-fit：cover'或'contains'。無論如何，由於後勤原因，圖像經常被製作成背景。 – jhpratt

僅僅因爲「出於邏輯原因而經常製作背景的圖像」，您不能僅僅假設圖像是背景。 –

當設置了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>

來源

2017-07-24 20:52:04

這似乎是最好的答案，但我遇到的問題是，現在我的圖像被扭曲，因爲當它變成「最大高度」時，它仍然變寬，只是不會更高。任何修補程序？ –

@JakeP是的，如果你看看我的例子，還有另一種方法來限制沒有'max-height'的'height'，那就是在容器上設置一個絕對的'height'以及'overflow：hidden'。 –

當我執行它時，會導致圖像在底部被切斷。我仍然需要看到整個圖像。 –

您可能想要爲圖像使用object-fit: cover; css規則。

這幾乎等同於背景大小：如果您使用背景進行封面。

請注意，該規則將「裁剪」圖像的某些部分，具體取決於比例。

UPDATE：如果你不想從圖像裁剪任何東西，你可以只使用height:inherit;和位置，你不知何故形象，以適應各種風格的（或許中心）

這將保持比將擴大寬度儘可能多。

來源

2017-07-24 20:56:41

這會起作用，但是我將其用於商店的產品圖像，因此切掉部分圖像不是一種選擇。「包含」可以作爲替代方案。 –

@JakeP我會建議將其設置爲背景圖片，根據我的回答。 – jhpratt

檢查我更新的答案。 –

據我所知，你需要圖像來填補無論大小不同的權利？

給<div>容器中的任何寬度和高度你想要的。
給予<img>元素寬度：100％。

高度將自動調整。

如果希望圖像彼此使用顯示後包裹：上<div>容器撓曲屬性。

來源

2017-07-24 22:02:48

這已經被回答，雖然你的答案不起作用。這將使圖像儘可能寬，但它不會考慮高圖像。如果'height'>'width'那麼高度應該是100％，而不是'width：100％'。 –

自動調整圖像填充div

回答

相關問題