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.
<b>My question is:</b> Should I resize the image using a PHP function, or should I be setting specified photo dimensions with CSS? (Looking for most robust method)Answer1:
You can see how StackOverflow does it...
<a href="https://i.stack.imgur.com/PT8jn.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/PT8jn.jpg" data-original="https://i.stack.imgur.com/PT8jn.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
<img src="https://www.gravatar.com/avatar/6bc2ad4c62572ad8df0b54d91e17617f?s=48&d=identicon&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.<pre class="snippet-code-html lang-html prettyprint-override">
<img src="https://www.gravatar.com/avatar/6bc2ad4c62572ad8df0b54d91e17617f?s=48&d=identicon&r=PG" alt="" width="324" height="324" class="avatar-me js-avatar-me">
Then of course aspect ratio is the other factor.Answer2:
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.Answer3:
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
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.