CODEWITHSUNDEEP
phphtmlcss
Robert Tossly
Robert Tossly

Reputation: 623

Resizing image with PHP or CSS?

Basically I have a div which contains a user's photo. In order for the photo to fill the div completely, I must resize the photo.

My question is: Should I resize the image using a PHP function, or should I be setting specified photo dimensions with CSS? (Looking for most robust method)

Upvotes: 2

Views: 2319

Answers (3)

ficuscr
ficuscr

Reputation: 7063

You can see how StackOverflow does it, simply setting a width and height on the image. What you are thinking of when describing using CSS...

enter image description here

<img src="https://www.gravatar.com/avatar/6bc2ad4c62572ad8df0b54d91e17617f?s=48&amp;d=identicon&amp;r=PG" alt="" width="24" height="24" class="avatar-me js-avatar-me">

Now that works great for down-sizing, less so for image up-sizing. Get the user to upload something equal in size of larger than the maximum size you will display at. Otherwise you will get "stretched" poor quality. 

<img src="https://www.gravatar.com/avatar/6bc2ad4c62572ad8df0b54d91e17617f?s=48&amp;d=identicon&amp;r=PG" alt="" width="324" height="324" class="avatar-me js-avatar-me">

Then of course aspect ratio is the other factor.

Upvotes: 4

Cameron Moorehead
Cameron Moorehead

Reputation: 126

You mention that you're new to programming. For this reason, I'd look at Bootstrap as a framework. You do this by adding Bootstrap's CSS file that you download from their page into your CSS file directory and linking to it in your HTML header.

You can make use of Bootstrap's grid system to ensure the image takes up the full span of the div:

<div class="col-md-12">

You can also make use of the img-responsive class so that it handles the images display responsively:

<img class="img-responsive" src="images/sample.png">

If the concern is more to the tune of image quality as it stretches to fill the div completely, the easiest solution is to request a higher resolution image from the user to work with.

Upvotes: 0

asdf
asdf

Reputation: 3067

You should definitely resize using CSS. You could resize with a PHP function, however you most likely will have to resize the image, save its resized copy, then serve it to the end user. In CSS you'll just be scaling the image's display size on the user-side without modifying the image itself.

Upvotes: 0

Related Questions