Setting an image's width and height without distorting it

Using object-fit

The object-fit CSS property is the real deal in managing the aspect ratio of an image. It allows the image to maintain its original shape. By setting object-fit: contain, you ensure the image fits within its box, regardless of the box's size. If you want the image to fill the specified box entirely, potentially cropping some parts of the image, use object-fit: cover.

Wrapping image in a div

The encapsulation technique is a pivotal strategy for images. Wrapping an image in a div helps in controlling the size and aspect ratio.

<div class="image-container">
  <img src="image.jpg" alt="image description"> <!-- your image goes here -->
</div>


.image-container {
  width: 200px; /* This is where you tell the image who's the boss */
  height: 150px; /* We're the boss! Right? */
  overflow: hidden; /* Anything extra, out you go! */
}

.image-container img {
  width: 100%; /* But do remember, you're inside `image-container` now */
  height: auto;
  object-fit: cover; /* "Contain" or "Cover". Remember the difference! */
}


Positioning using object-position

object-position can be your ultimate fine-tuning tool. Use it with object-fit to correctly position the image within the container:

.responsive-image {
  object-fit: contain;
  object-position: center; // Balance in all things, ancient CSS philosophy
}


Being responsive

Implementing max-width and height: auto helps your responsive design game strong. These properties enable the image to scale across different device sizes while preserving the aspect ratio.

SVG hustling

SVG with preserveAspectRatio can be a lifesaver for your responsive design. SVGs adapt naturally to container sizes, and preserveAspectRatio enables them to maintain their shape regardless of the container size.

Compatibility comes first

Browser compatibility is essential. Verify the compatibility of the object-fit property. Websites like caniuse.com provide browser support info. Consider using vendor prefixes like -o-object-fit: contain for better Opera compatibility.

Enhancing user experience

Serve your users a visually pleasing experience by maintaining the aspect ratio and controlling load times:

• Utilize background-size for background images to maintain their aspect ratio:

.background-img {
  background-image: url('image.jpg'); // Sit back and enjoy the view!
  background-size: contain; /* or cover */
  background-repeat: no-repeat; // Nobody likes repeats, right? unless it's pizza!
}


• Consider using multiple image sources with <picture> to optimize image loading according to the viewing device:

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg"> // Large image for large screens
  <source media="(min-width: 450px)" srcset="medium-image.jpg"> // Medium-sized image for smaller devices
  <img src="small-image.jpg" alt="image description">  // Fall back to small image for small screens
</picture>


• Implement lazy loading with the loading attribute on <img> elements to improve page load speed:

<img src="image.jpg" loading="lazy" alt="image description"> // Img taking a lazy day off! No loading until absolutely necessary


Resolving potential challenges

Get ready for addressing any issues:

• Always run cross-device checks to judge the image viewability on multiple devices.
• Use dummy placeholders or skeleton screens during image load for seamless user experience.
• Apply a background-color to create a fallback view before images load, maintaining the site's structure.