CSS：如何設置相對於父高度的圖像大小？

Question

我想弄清楚如何調整圖像的大小以使其保持寬高比，但會重新調整大小直到圖像的高度與包含的 div 的高度匹配。 我有這些非常大和長的圖像（屏幕截圖），我想將它們放入寬度為 200 像素、高度為 180 像素的 div 中進行顯示，而無需手動調整圖像大小。 為了使它看起來不錯，圖像的兩側需要溢出並被包含的 div 隱藏。 這是我到目前為止所擁有的：

http://jsfiddle.net/f9krj/2/

HTML

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

CSS

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

如您所見，圖像父容器上顯示的是灰色，根本不應該顯示。 為了使該容器完全裝滿，兩側的寬度需要相等。 這可能嗎？ 是否也可以解釋一個也太高的圖像？

Answer 1

原答案：

如果您准備選擇 CSS3，則可以使用 css3 translate 屬性。 根據較大的調整大小。 如果您的高度大於容器，寬度小於容器，則寬度將拉伸至 100%，高度將從兩側修剪。 更大的寬度也是如此。

你的需要， HTML：

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

和CSS：

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

瞧！ 工作： http : //jsfiddle.net/shekhardesigner/aYrhG/

說明

DIV 設置為relative位置。 這意味着所有子元素都將從該 DIV 開始的位置獲得起始坐標（原點）。

圖像設置為塊元素， min-width/height都設置為 100% 意味着調整圖像大小，無論其大小是其父元素的 100% 的最小值。 min是關鍵。 如果通過min-height，圖像高度超過了父級的高度，沒問題。 它將尋找 if min-width 並嘗試將最小高度設置為父級的 100%。 反之亦然。 這確保了 div 周圍沒有間隙，但圖像總是大一點，並且會被overflow:hidden;修剪掉overflow:hidden;

現在image ，這被設置為left:50%和top:50%的absolute位置。 意味着將圖像從頂部向左推 50%，確保原點取自 DIV。 左/上單位是從父級開始測量的。

神奇時刻：

transform: translate(-50%, -50%);

現在，CSS3 transform屬性的這個translate函數移動/重新定位一個有問題的元素。 此屬性處理應用的元素，因此值 (x, y) OR (-50%, -50%) 表示將負片圖像向左移動圖像尺寸的 50%，並將負片頂部移動圖像尺寸的 50% .

例如。 如果圖像大小為 200px × 150px， transform:translate(-50%, -50%)將計算為 translate(-100px, -75px)。 當我們有各種大小的圖像時，% 單位會有所幫助。

這只是找出圖像和父 DIV 的質心並匹配它們的一種棘手方法。

抱歉解釋時間太長！

閱讀更多資源：

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

Answer 2

更改您的代碼：

a.image_container img {
    width: 100%;
}

對此：

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

Answer 3

使用 CSS 的max-width屬性，如下所示：

img{
  max-width:100%;
}

Answer 4

你可以為它使用 flex box ..這將解決你的問題

.image-parent 
{
     height:33px; 
     display:flex; 
}

Answer 5

如果你使用答案的Shekhar K. Sharma，它幾乎可以工作，你還需要添加到你的這個height: 1px; 或者這個width: 1px; 因為必須工作。

Answer 6

如果您所做的只是填充 div，這可能會幫助其他人，如果縱橫比不重要，則響應。

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}

Answer 7

對我來說，最簡單的方法是不使用 position absolute，翻譯。

<div class="img-container">
 <img src="yoururl" />
</div>

CSS 應如下所示：

.img-container {
 height:100px;
 width:100px;
 overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}