無需裁剪和拉伸即可設置圖像

Question

我想在img標簽中設置圖像，而不是裁剪或拉伸它。 也就是說，我設置的圖像比例是1：1，但圖像的寬高比可能會有所不同，所以我既不想改變寬高比也不想垂直或水平裁剪。 我的圖像動態變化。

我已經檢查了多個解決方案，例如： 這個建議高度或寬度。 但我不想要兩者。

目前我在這：HTML：

<div id="container">
    <img id="imgHolder" />
</div>

和CSS

#container{
        height: 100px;
        width: 100px;
        background-color: yellow;
        overflow: hidden;
    }
    #imgHolder{
        height: 100%;
        /* OR width: 100%; */
    }

救命。 我只喜歡CSS。

Answer 1

您可以設置圖像的max-width和max-height

#container img {
  max-width: 100%;
  max-height: 100%;
}

這樣做不會拉伸圖像，因為您不改變其width或height ：無論圖像大小如何，將上述屬性設置在一起可確保最長邊縮小到其父div的最大寬度（或高度），同時另一個可以自由地適應自己，保持原始圖像比例。

示例http://codepen.io/anon/pen/qEjLZa

---

中心圖像（ver。和hor。）的示例： http ： //codepen.io/anon/pen/NPgege

Answer 2

如果在父容器上設置高度和寬度，則在不拉伸或裁剪圖像的情況下很難保持完美的寬高比。 如果圖像尺寸相同，則可以使用100px x 100px

CSS

#container{ position: relative; width: 100px; height: 100px; }

img{ 
  position:absolute;
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
  }

這將設置圖像以覆蓋父容器。 你也可以試試

img {
  background: url( yourimage.png) cetner no-repeat;
  background-size: contain;
}

這將設置圖像以填充父容器中較大的尺寸並將其居中。 較小的尺寸將不會被覆蓋，但它將保留為apsect比率。