如何通过CSS不成比例地缩放图像？

Question

如果我得到一张图片，比如100 * 100px，我想要的是将这张图片缩放到一个尺寸为100 * 800px的区域（仅用于测试）。我尝试使用max-height或max-width，但这只是按比例缩放图片，可以看到here。

我应该如何拉伸图片以使其适合该地区？非常感谢！

Answer 1

你可以做什么。 JsFiddle

将您的CSS代码更改为：

img {
  width:50px;
  height:800px;
  background-size: 100%;
}

这将允许图像拉伸以填充高度/宽度

让我知道这是否有效！

Answer 2

CSS 3 background-size：

包含

盖

100％100％

会为您提供有关您所谈论内容的一些变化。

见这里：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

因为您的标准图像将是100px×100px; 你可以给你的img一个ID，然后使用你的CSS中的ID来设置高度和宽度。 max-height或max-width只会设置两者的最大值。不改变它

#img {
  width:50px;
  height:800px;
}