How can CSS properties like max-width and max-height be effectively used in conjunction with PHP image resizing scripts to maintain image aspect ratios?

When using PHP image resizing scripts to dynamically generate images, it is important to maintain the aspect ratio of the original image to avoid distortion. By setting the max-width and max-height CSS properties on the image element, you can ensure that the resized image stays within the specified dimensions while preserving its aspect ratio. 

// Example PHP image resizing script
$original_image = 'original.jpg';
$width = 300; // desired width
$height = 200; // desired height

list($original_width, $original_height) = getimagesize($original_image);
$ratio = $original_width / $original_height;

if ($width / $height > $ratio) {
    $width = $height * $ratio;
} else {
    $height = $width / $ratio;
}

$resized_image = imagecreatetruecolor($width, $height);
$source = imagecreatefromjpeg($original_image);
imagecopyresampled($resized_image, $source, 0, 0, 0, 0, $width, $height, $original_width, $original_height);

header('Content-Type: image/jpeg');
imagejpeg($resized_image);
imagedestroy($resized_image);

Keywords

PHP CSS max-width max-height image resizing

Related Questions