我有一個尺寸為630x630px像素的div。現(xiàn)在我想在這個div中放置一個圖像。如果圖像大于630像素(它的寬度或高度)，我可以簡單地使用最大寬度和最大高度，它將適合630像素。但是如果圖像小于630px呢？在這種情況下，我希望這個圖像的較大尺寸以恒定的縱橫比拉伸到630像素。我該怎么做？

您可以在圖像上使用對象適合和對象位置CSS屬性來實現(xiàn)這一點。您的代碼應該如下所示:

.container {
  width: 630px;
  height: 630px;
  position: relative;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

我會避免使用位置:絕對；不必要的時候。 對象匹配自己就能做到這一點。

.container {
  width: 630px;
  height: 630px;
  
  /* To visualize better the behavior of the image */
  border: 1px solid #333;
  margin-bottom: 1rem;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="container">
  <img src="https://placehold.co/1200x1000" alt="">
</div>

<div class="container">
  <img src="https://placehold.co/150x80" alt="">
</div>