Question

我遇到了图像及其像素probem.well的问题让我告诉你。我得到了2448 x 3264像素的图片。因此，我只是决定用这种方式缩小尺寸

 <img src="1.jpg" style="width:600px;height:500px"/>

但是我看到有一个问题，图片失去了它的清晰度和可见度，它看起来像拉得很近，图像中的人看起来很难看。但是使用原始尺寸看起来很大。我确信有一种方法可以做，因为我看到谷歌图像的结果，也在一些网站上我试图看到他们的代码，但无法弄明白。

有谁能告诉我如何使图像看起来很好，即使它们的分辨率太长并使它们适合给定的宽度？

更新

好的，现在我知道我们需要一些服务器端图像处理，任何人都可以告诉我这样做的方法谢谢

Answer 1

最广泛使用的做法是调整图像服务器端的大小。当图像上传到服务器（例如由用户）时，服务器将其获取并创建并创建所需的缩略图。

不幸的是，HTML，CSS和JavaScript无法做到这一点。并且有许多使用CSS强制图像大小的缺点。例如，用户必须下载整个图像（我猜你大概是6MB），这可能需要很长时间。

Answer 2

没有任何语言，您无法执行此操作，或者您必须编辑图像并需要上传到您的主机。

Answer 3

尝试使用普通的html。如果你有正确的宽度：高度比（在这种情况下，3：4）

，它也会有所帮助

这样：

<img src="1.jpg" width="375" height="500"/>

Answer 4

为了获得更好的质量，你需要更多东西，然后只需要HTML。您必须手动调整图像大小，使用一些服务器端脚本来在渲染之前准备图像（如果您确定特定尺寸，甚至可以在上载时更好）。

Answer 5

您需要的是服务器端图像处理。对于exaple phpThumb或其他实施，取决于您的serwer平台。

示例：

<img src="../phpThumb.php?src=1.jpg&w=600" />

phpThumb将打开 src 中传递的图片，并将其大小调整为<strong> w - >传递的宽度即时过程映像并输出到浏览器。

Answer 6

要使图片保持清晰，您需要确保保持纵横比。宽高比是图像的宽高比，如果您调整大小保持比例，则保持其清晰度。您正在调整已调整大小的图像，因为2448/3264！= 600/500。

如果您只提供宽度或高度属性中的一个，则现在标签会按宽高比调整大小。例如：

<img src="your_src" width=600>

这将呈现保持纵横比（它计算所需的高度）。但是，如果您有最大高度约束，这有时可能会导致问题，因为如果您的div具有最大高度，重新计算的高度可能会超过div高度。

如果您有max-height和max-width约束，则可以使用以下代码使用JS调整图像大小。我假设max-width和max-height值分别为600px和500px，您可以根据需要进行更改：

height = this.clientHeight;
width = this.clientWidth;

aspectRatio =  width / height;
if (height > width)
{
    height = 500;
    width = height * aspectRatio;
}
else if (width > height)
{
    width = 600;
    height = width / aspectRatio;
}
this.setAttribute("height", height+"px");
this.setAttribute("width", width+"px");

使巨大的像素图像适合给定的宽度和高度

6 个答案: