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

我遇到了图像及其像素问题probem.well让我告诉你这个。我得到了2448 x 3264像素的图片。因此，它的一个大的图像我决定用这种方式使巨大的像素图像适合给定的宽度和高度

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

但是有我看到一个问题，画面失去其清晰度和其知名度，以减少它的大小，它看起来像把它关闭，而该人在图像看起来非常难看，但使用原始尺寸看起来非常大。我相信有一种方法可以做，因为我看到谷歌图像的结果，也在一些网站上，我试图看到他们的代码，但无法弄清楚。

任何人都可以请告诉我如何使图像看起来不错，即使他们得到太长的分辨率，并使他们适合在给定的宽度？

更新

好了现在我明白了，我们需要一些服务器端的图像处理和任何人都可以告诉我怎么会做感谢

来源

2012-01-20 niko

[对于任何人都可能会翻过这个问题，如果你是HTML5-ING它，你可以看看'帆布'和'drawImage（）'http://www.w3schools.com/tags/canvas_drawimage.asp – user1135469

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

不幸的是，这不能用HTML，CSS或JavaScript来完成。还有很多缺点是用CSS强制图像的大小。例如，用户必须下载整个图像（我猜你大概是6MB），并且可能需要很长时间。

来源

2012-01-20 07:16:43 Teneff

全无任何语言的方式你不能做到这一点，或者你必须编辑图像并需要上传到主机。

来源

2012-01-20 07:12:22

尝试使用纯html。它还将帮助，如果你有合适的宽度：高比（在这种情况下，3：4）

这样：

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

来源

2012-01-20 07:16:07 Lamariffic

我看不出比CSS更好，你怎么能保持相同的长宽比你强迫宽度和高度？ – Teneff

因为您正在强制宽度和高度 - 不正确的解决方案，所以这不会保持宽高比。 – Ninja

要获得更好的质量，你需要更多的东西，那么只有HTML。您必须手动调整图像大小，或者使用一些服务器端脚本在渲染之前准备图像（如果确定具体尺寸，最好在上载时进行）。

来源

2012-01-20 07:16:19 YuS

你需要的是服务器端图像处理。例如phpThumb或其他实施，具体取决于您的serwer平台。

示例： - >的飞行，并输出到浏览器的处理图像

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

的phpThumb将打开SRC传递图像，并且调整大小以在瓦特宽度通过。

来源

2012-01-20 07:21:50 mishaka

要使照片保持清晰度，您需要确保保持宽高比。宽高比是图像的宽高比，如果您调整图像的大小以保持比例，则会保持其清晰度。由于2448/3264！= 600/500，你正在调整大小的图像。

如果您仅给出宽度或高度属性中的一个，则现在通过高宽比调整标记大小。例如：

<img src="your_src" width=600>

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

如果您有最大高度和最大宽度限制，可以使用以下代码使用JS调整图像大小。我分别假设最大宽度和最大高度值600像素和500像素，您可以按照您的需求发生变化：

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");

来源

2012-01-20 08:44:38 Ninja

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

回答

相关问题