CODEWITHSUNDEEP
phpjavascriptcss
dot
dot

Reputation: 2833

one css style for landscape and portrait photos

I am displaying images that were shot in both landscape and portrait format. I'd like to style them to always display the longest side of the photo at 500px. Is this possible?

Upvotes: 4

Views: 3143

Answers (3)

dot
dot

Reputation: 2833

Someone posted the answer I used and then deleted it for some reason. It's working perfectly. 

max-width: 500px;
max-height: 500px;

Thanks!

Upvotes: 3

wanovak
wanovak

Reputation: 6127

PHP

list($width, $height, $type, $attr) = getimagesize("img/test.jpg");
if($width > $height){
    $newWidth = 500;
    $newHeight = (500 / $width) * $height;
}else{
    $newHeight = 500;
    $newWidth = (500 / $height) * $width;
}

HTML

<img src="img/test.jpg" width="<?php echo $newWidth; ?>" height="<?php echo $newHeight; ?>" alt="Test" />

Upvotes: 0

F&#225;bio
F&#225;bio

Reputation: 91

You can set background-size:100% 100%; (this will make images fill its parent element) Then you can make the div that has the photo to have width:500px;

Upvotes: 0

Related Questions