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

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或更低版本不支持最大宽度/最大高度,这就是为什么您仍然可能需要回退到固定大小.