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

【问题标题】：How do I convert a thumbnail to a larger image css如何将缩略图转换为更大的图像 css
【发布时间】：2013-07-22 02:41:03
【问题描述】：

是否可以在不扭曲图像的情况下调整图像大小？

我有一个 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>';

【问题讨论】：

如果你的容器是200px wide，你可以使用img { max-width:100%; height:auto; } 这会将图像拉伸到包含div的宽度，同时保持纵横比——如果你增加尺寸，你会注意到明显有些模糊。如果你能发布你的 HTML 和 CSS 会有所帮助。

标签： html image css

【解决方案1】：

如果不是 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，这就是为什么您仍然可能想要一个回退到固定大小。

【讨论】：

请向他解释那里发生了什么！ :) 然后 == +1 :)
默认情况下您提供固定宽度或固定高度。哪个对你更重要。然后强制剩余参数自动缩放，因此，自动。之后，您使用附加属性覆盖图像以进行缩放，以便在需要调整大小时，它们会变小 + IE6 或更低版本不支持 max-width/max-height，这就是为什么您仍然可能想要一个回退到固定大小。
你必须把它给他，而不是给我！已编辑！ :)

【解决方案2】：

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

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

正如其他人所说，除非图像不是vector 或不是SVG，否则它总是会导致质量下降。

【讨论】：

有没有用 css、JavaScript 将图像制作成矢量或 SVG？我通过 API 拉取图像，它只返回一个 70 像素的缩略图。
@dgolman 恐怕你不能制作矢量图，但可以制作 SVG。
@dgolman 看到这个链接：stackoverflow.com/questions/12991351/…希望它有帮助:)
那么基本上没有办法在不损失质量的情况下增加缩略图的大小？
@dgolman 如果有人拿走了你的馅饼并吃了它。你的馅饼还在吗？不...与像素和质量相同！ =)