33257

Resizing image with PHP or CSS?

Question:

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.

<ul><li>The thing is, I am relatively new to programming and I am not sure which approach is most appropriate to resize the image to fit the div (I'm guessing the most robust way is PHP).</li> </ul>

<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&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.

<pre class="snippet-code-html lang-html prettyprint-override"><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.

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 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.

Recommend

  • To use other table as a WHERE criteria in SQL
  • Scroll down whole browser window
  • StackExchange API - Deserialize Date in JSON Response
  • Simple test app deploys to Heroku but won't run
  • jParallax trouble
  • window.onbeforeunload in javascript
  • How to stamp out template in self contained custom elements with vanilla js?
  • File loader changed image file name but not the file name in HTML file
  • Is it better to use the “hidden” CSS attribute or fetch each set of new images?
  • MAVEN : Run Multiple Maven Project using Maven Test
  • Get a trait object reference from a vector
  • google maps autocomplete bounces back already cleared text …odd…odd…odd
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • Outputting SharePoint Hyperlink Column as URL
  • Doctrine/Symfony entity generator and generating entity from one table
  • blade.php method outputting it's result to the form
  • Uncaught TypeError: $(…).select2 is not a function
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • Display images in Django
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Installing Hadoop, Java Exception about illegal characters at index 7?
  • Optimizing database types to compact database (SQLite)
  • RectangularRangeIndicator format like triangular using dojo
  • Resize panoramic image to fixed size
  • How to set/get protobuf's extension field in Go?
  • Cross-Platform Protobuf Serialization
  • How to show dropdown in excel using jrxml (jasper api)?
  • Importing jscolor library in angular 2
  • Do I've to free mysql result after storing it?
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Circular dependency while pushing http interceptor
  • Linker errors when using intrinsic function via function pointer
  • Revoking OAuth Access Token Results in 404 Not Found
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Turn off referential integrity in Derby? is it possible?
  • python draw pie shapes with colour filled
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass