如何調整加載到頁面上的圖像的大小？

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

但是，這仍然會加載整個圖像，而不是從技術上縮小它。 因此，如果圖像很大，它仍然會緩慢加載