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

Question

So I built a website that loads the homepage of Imgur and pulls the images as full size and then puts them on the homepage of my site. The only problem is that some of the images are huge and I don't know how to resize them. I don't know if I should use CSS, Javascript, or if I can do it in PHP.

FYI, I'm using the Simple HTML Dom Scraper

Here's my website: www.probablycats.com

Here's my PHP code:

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

}

Here's my CSS code:

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

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

So to clarify, some of the images are huge and go past the width of the screen. How exactly would I resize them? I can explain more if needed, but if anyone can help me with this I would really appreciate it. Thanks!

Answer 1

The easy way is with CSS:

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

This will render the images in the desired maximum size, while maintaining the original proportions. Note: resizing with the HTML width attribute will not maintain original proportions in all browsers , but will not physically resize the images. However, since you're referencing the images from Imgur's server, this won't impact your own site's bandwidth.

To do this with PHP would involve loading the images onto your server, using gd2 or imagick to resize them, saving them, and then referencing the saved images on your server for use in display on your page. This may also be a violation of Imgur's T&C

Answer 2

You could specify a width here:

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

However, this will still load the entire image, not technically scale it down. So, if the image is huge, it will still load slowly