0

有没有办法在不扭曲图像的情况下调整图像大小？

我有一个 70 像素的缩略图图像，我需要将其调整为 200 像素 X 165 像素，同时保持纵横比。目前，当我设置宽度：200px 和高度：165px 时，它会拉伸它。

这是代码：

CSS

.listing-img-div {
    width: 200px;
    height: 165px;
}

.listing-img {
    border: 1px solid black;
    margin-top: 5px;
    border: 1px solid #ddd;
    width: 100%;
    height: 100%;
}

HTML/PHP

echo '<div class="listing-img-div">';
  echo '<img class="listing-img" src="'.$img.'" alt="'.$title.'">';                                                     echo '</div>';
4

2 回答 2

6

如果不是 SVG 或任何类型的 Vector Type 图像，拉伸它会导致质量损失，因为 JPG、BMP、PNG 等类型属于有损类型。

然而，简单的调整大小可以通过保持纵横比来实现：

img {
   height: 165px;
   width: auto;
   max-width: 200px;
   max-height: 165px;
}

或者

img {
   height: auto;
   width: 200px;
   max-width: 200px;
   max-height: 165px;
}

解释：

默认情况下，您提供固定宽度或固定高度。哪个对你更重要。强制剩余参数自动缩放，因此是自动的。之后，您使用附加属性覆盖图像以进行缩放，以便在需要调整大小时，它们会变小 + IE6 或更低版本不支持 max-width/max-height，这就是为什么您仍然可能想要一个回退到固定大小。

于 2013-07-18T13:04:08.910 回答
1

您也可以将宽度设置为auto并将高度设置为100%。

img {
   width: auto;
   max-height: 100%;
}

正如其他人所说，在图像不是矢量或不是SVG之前，它总是会导致质量下降。

于 2013-07-18T13:36:33.167 回答