如何更改img宽度但在css中保持原始高度？答案

【问题标题】：How to change img width but keep original height in css?如何更改img宽度但在css中保持原始高度？
【发布时间】：2016-01-28 04:54:10
【问题描述】：

在 css 中，如何将图像宽度更改为原来的两倍，但保持高度与原始高度相同？

我试过了

img {
    width : 400px;
    height : auto;
}

它应该适用于 IE11+。另外图片是动态加载的，所以我不知道原始高度，但我知道宽度（它是一个指定的参数）。

但它不起作用

【问题讨论】：

图片的原始高度是多少？你可以试试img { width: 400px; min-height: {image-height}px; }。它会扭曲您的图像，但会阻止高度自动缩放。这只有在您提前知道特定图像的高度时才有效。
我无法在 css 中硬编码原始高度。

【解决方案1】：

两倍大还是正好 400 像素宽？

要使其翻倍（或任何x 倍或更大或更小），您可以使用 CSS3 scale 转换。

img {
  transform: scale(2);
}

这将使图像在各个方向上就位，所以也许您还想稍微移动一下：

img {
  transform: scale(2) translate(25%, 25%);
}

【讨论】：

【解决方案2】：

你的css代码是正确的

检查图片的原始尺寸

或他父母的显示或宽度

img{
  width: 400px;
}

总是你必须只设置图像的宽度和图像的高度自动设置图片原始大小的比例

【讨论】：