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

Question

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

仅供参考，我正在使用Simple HTML Dom Scraper

这是我的网站： 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;
}

因此，为了澄清，一些图像是巨大的，超过了屏幕的宽度。 我究竟会如何调整它们的大小？ 如果需要我可以解释更多，但如果有人能帮助我，我会非常感激。 谢谢！

Answer 1

简单的方法是使用CSS：

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

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

要使用PHP执行此操作，需要将图像加载到服务器上，使用gd2或imagick调整大小，保存它们，然后引用服务器上保存的图像以便在页面上显示。 这也可能违反了Imgur的条款和条件

Answer 2

您可以在此处指定宽度：

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

但是，这仍然会加载整个图像，而不是从技术上缩小它。 因此，如果图像很大，它仍然会缓慢加载