Question

我想在img标签中设置图像，而不需要裁剪或拉伸它。也就是说，我设置的图像比例是1：1，但图像的宽高比可能会有所不同，所以我既不想改变宽高比也不想垂直或水平裁剪。我的图像动态变化。

我已检查过多个解决方案，例如：This one，表示裁剪高度或宽度。但我不想要两者。

目前我在这： 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比率。

无需裁剪和拉伸即可设置图像

2 个答案: