Question

无论如何都要在不扭曲图像的情况下调整图像大小？

我有一个70像素的缩略图，我需要将其调整为200px X 165px，同时保持宽高比。当我设置宽度时它伸展它：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>';

Answer 1

如果它不是SVG或任何类型的矢量类型图像，拉伸它将导致质量损失，因为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或更低版本不支持最大宽度/最大高度，这就是为什么您仍然可能需要回退到固定大小。

Answer 2

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

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

正如其他人所说，直到图片不是vector或不是SVG，它总会导致质量下降。

如何将缩略图转换为更大的图像css

2 个答案: