如何调整加载到页面上的图像大小？

因此，我建立了一个网站，加载Imgur的主页，并将图像作为完整大小，然后将它们放在我网站的主页上。唯一的问题是，一些图像是巨大的，我不知道如何调整它们。我不知道我是否应该使用CSS，Javascript，或者如果我可以在PHP中使用它。如何调整加载到页面上的图像大小？

仅供参考，我使用的是简单的HTML DOM刮板

这里是我的网站：www.probablycats.com

这里是我的PHP代码：

$imgur = file_get_html('http://www.imgur.com'); 
foreach($imgur->find('div[class="post"]') as $images) 
{ 
    $imagelink = 'http://www.imgur.com/gallery/'.$images->id; 
    $imagepage = file_get_html($imagelink); 
    foreach($imagepage->find('#image') as $image2) 
    { 
     echo "<div class=\"images\">$image2</div>"; 
    }

}

这里是我的CSS代码：

html 
{ 
    background-color:#D0D0D0; 
    max-width:100%; 
} 

.images 
{ 
    padding:20px 20px; 
    float:left; 
}

所以为了澄清，一些图像是巨大的，并超过了屏幕的宽度。我将如何重新调整它们？我可以解释更多，如果需要的话，但如果任何人都可以帮助我，我会很感激。谢谢！

来源

2012-12-03 emagdnim

最简单的方式是使用CSS：

.images img 
{ 
    max-width: 200px; 
}

，这会使得在所需的最大尺寸图像，在保持原有比例。 注意：使用HTML width属性调整大小不会在所有浏览器中保持原始比例，但不会实际调整图像大小。但是，由于您正在引用来自Imgur服务器的图像，因此这不会影响您自己网站的带宽。

要做到这一点与PHP将涉及到图像加载到您的服务器上，使用gd2或imagick调整大小，保存它们，然后引用您的服务器上保存的图像用于显示在您的网页上。这也可能是Imgur式T &的C违反

来源

2012-12-03 22:57:23

这很完美！我不敢相信我没有看到... – emagdnim

你可以在这里指定的宽度：

echo "<div class=\"images\" width=\"150px\">$image2</div>";

然而，这仍然将整个图像加载，技术上没有规模下来。所以，如果图像很大，它仍然会缓慢加载

来源

2012-12-03 22:57:55

这将无法正常工作。你将不得不把宽度属性放在图像上，而不是在div上。即便如此，在某些浏览器中，图像会出现偏斜。 –

@TheSmose哎呀，我的错。你对'div'标签的宽度属性是正确的。它需要继续使用'img'标签。但是，只要您只指定一个参数（宽度或高度），它就会按比例缩放。当您指定宽度和高度并且与原始尺寸不成比例时，图像会变形。 –

在旧版浏览器中，如果不指定高度，则只会缩放宽度，并且会使图像倾斜。 –

如何调整加载到页面上的图像大小？

回答

相关问题