如何將一個<img>居中放在一個div中並使其與div的高度一起縮放？

我使用居中的imgs作爲某些圖塊的背景。我試圖讓這些圖像與他們父母div的高度一起縮放，如果它們更寬，那麼他們的父母會爲他們隱藏溢出。如何將一個<img>居中放在一個div中並使其與div的高度一起縮放？

例子：

*我知道了現在的工作。答案是下面，我更新這個代碼來顯示所有我需要用它來得到它的工作*

HTML

<div class="container"> 
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg"> 
</div>

CSS：

.container { 
    height:250px; 
    width:50%; 
} 
.derp{ 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
}

這裏有一個近例：http://codepen.io/chriscoyier/pen/myPMGB

區別在於我使用s而不是背景圖像，而不是完全填充div的img，它適合於高度並隱藏寬度溢出。

我試圖避免使用背景圖像，因爲我使用了很多這些瓷磚，並且爲每個瓷磚製作CSS規則都不起作用。

來源

2015-08-14 user3799026

'width：auto' ..？？ –

如果是背景，爲什麼不使用CSS背景（具有背景比例，背景位置等）。 – GolezTrol

@marc每個元素將使用不同的URL，我試圖避免使用背景圖像，因爲他們會有大量的CSS規則。 – user3799026

爲了按照div的高度進行縮放，我會將高度從px更改爲% - 這樣，更大的div，更大的圖片。爲了確定圖像，我會使用圖像CSS中的邊距。這看起來會像這樣：

.derp{ 
 
     height:80%; 
 
     width:80%; 
 
     margin:10%; 
 
    } 
 
.container { 
 
    height:250px; 
 
    width:50%; /* needed */ 
 
    /* inner img is centered horizontally */ 
 
    vertical-align:top; 
 
    text-align:center; 
 
    overflow-x:hidden; 
 
}

<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div --> 
 
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg"> 
 
</div>

來源

2015-08-14 22:01:07

有沒有辦法保持縱橫比與圖像的溢出被隱藏的寬度？ – user3799026

是 - 按照pentz的建議，向derp類添加'object-fit：cover;'。 –

根據您需要多少個瀏覽器的支持，我會建議你使用對象的配合！支持它是okay if you can ignore IE，但如果您的項目符合條件，我認爲今天使用它沒有問題。此外，總是有一個polyfill。

你可以找到一個不錯的總結on CSS-Tricks.com有關財產。它基本上與背景大小相似，但是用於<img>標籤。在你的情況下，object-fit: cover;會訣竅。

我在CodePen上發佈了a little demo，告訴你它是如何工作的。

img { 
    height: 100%; 
    object-fit: fill; 
    width: 100%; 
}

來源

2015-08-14 22:04:31 pentzzsolt

，以保持圖像的長寬比，最好的辦法是將寬度設置爲自動（和它的默認行爲，所以你並不需要明確設置）。簡單的overflow:hidden它的工作原理與您想要的幾乎一樣。

堅硬的部分是水平居中。你可以試試這個答案：css to center a image horizontally。

但是，如果所有圖像的大小不一樣，則需要爲每個圖像制定一個規則。在這種情況下，將圖像設置爲background-img對於語義和可訪問性會更好（因爲您的圖像在頁面中沒有意義，它不會傳達任何信息，而是裝飾）。一個<img>將被屏幕閱讀器讀取（alt屬性），並在你的情況下，它不會幫助盲人。

來源

2015-08-14 22:30:51 yhoyhoj

如何將一個<img>居中放在一個div中並使其與div的高度一起縮放？

回答

相關問題