CSS 圖像適合寬度和高度

Question

我正在嘗試使圖像適合其容器。 問題是，我只能將它設置為適合寬度width: 100%或 height height: 100%但不能同時設置。

基本上它應該檢查天氣容器的長度或高度與圖像寬度和高度（標准化）相比是否更小，並對其進行調整。 它也應該使圖像居中。

這是 Windows 照片查看器中的標准行為。 圖像始終可見，居中並保持比例。 我正在努力使它完全像那樣。

PS：我更喜歡 css 解決方案。 但是如果不可能/很痛苦，js也可以。

PSPS：對不起，如果這是重復的。 我在互聯網上搜索並發現了類似的問題，但似乎沒有一個有正確的答案。

Answer 1

對此有幾種解決方案。 他們沒有一個是完美的。 這通常取決於您是否想要裁剪圖像。

如果您對裁剪沒問題，可以嘗試以下操作：

<div class="image"></div>
<style>
    .image {
          width:250px;
          height:150px;
          background-image:url('http://lorempixel.com/400/200/');
          background-size:cover;
    }
</style>

如果您不希望它被裁剪，那么它將取決於您想要如何布置圖像（或圖像）。 下面是幾個例子：

• http://healy.rocks/gallery1 - 響應式畫廊布局
• http://healy.rocks/gallery2 - 帶有 mansonry.js 的 Pinterest css 布局
• http://healy.rocks/gallery3 - 簡單的行 css 布局
• http://healy.rocks/gallery3b - 帶有 rowGrid.js 的 Google 圖像 css 布局

Answer 2

您可以使用 CSS background-image設置圖像，如下所示：

div{
    width: 200px;
    height: 200px;
    background-image: url("http://i.imgur.com/cjgKmvp.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

演示： https : //jsfiddle.net/ue49awaL/8/