Html 设置图像而不进行裁剪和拉伸

我想在img标签中设置图像，而不剪切或拉伸它。 也就是说，我设置的图像比例是1:1，但图像的纵横比可能会有所不同，因此我既不想更改纵横比，也不想垂直或水平裁剪它。我的图像在动态变化

我已经检查了eg:的多种解决方案，它表示作物高度或宽度。但我不想两者兼而有之

目前我在： HTML:

---

救命啊。我只喜欢CSS。

您可以设置图像的

最大宽度和
最大高度

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

这样做，图像不会被拉伸，因为您不会更改其
宽度
或
高度
：无论图像大小如何，将上述属性一起设置可确保最长的一面减小到其父
div
的最大宽度（或高度），而另一面可以自由调整自身，保持原始图像的比例

范例


居中图像（垂直和水平）示例：
如果在父容器上设置高度和宽度，则在不拉伸或剪切图像的情况下很难保持完美的纵横比。如果图像大小相同，100px x 100px，则可以使用

CSS

这将设置图像以覆盖父容器。你也可以试试

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

这将设置图像以填充父容器的较大尺寸，并将其居中。较小的维度将不被覆盖，但它将保留apsect ratio。
可能重复@Paulie\u D why javascript？如果您不想同时使用这两个维度，可以设置最大高度和/或最大宽度删除代码中的高度并使用它。请看例句谢谢。。现在有一个额外的查询，我可以把它分配给中心吗？我想我的第二个例子已经预料到了你的问题：）我把html代码放在了正文中，css放在了脚本中，但它不适用于chrome或Mozilla。但是在JSFiddle或codePen中工作。上次就帮我吧。如果没有一个真实的例子来说明你的具体问题，我就说不出有什么问题。
#container img {
  max-width: 100%;
  max-height: 100%;
}

#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;
}