CSS图像缩放以适应区域内不扭曲

Question

有没有办法使用 CSS 或其他方式使图像适合某个区域。可以说我有多个不同大小的图像，我希望它们都适合 150px x 100px 的 div。我不想缩放图像，因为有些图像可能很高而其他图像很窄，我只是想让它们适合这个区域，其余部分隐藏起来。

我考虑过使用 overflow:hidden 但它似乎在 IE6 中没有被隐藏。

有什么想法吗？

Answer 1

你应该尝试使用这个:

img{
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 100px;
}

编辑:看起来 IE6 不支持 max-width 和 max-height 属性。但是，您可以实现此处给出的解决方法:max-width, max-height for IE6

摘录(以防链接文章停止工作):

img {
  max-height: 100px;
  max-width: 100px;
  width: expression(document.body.clientWidth > 150? “150px”: “auto”);
  height: expression(document.body.clientHeight > 100? “100px”: “auto”);
}