Mobile friendly Responsive images with CSS

[Thumbnail image]

The term “responsive images” has come to mean “responsive images in HTML”, in other words, the srcset and sizes attribute for <img> and the <picture> element. But today I want to talk about a common issue, when image go outside container.

srcset in CSS

In HTML, srcset is like this:

<img srcset="
  examples/images/image-384.jpg 1x, 
  examples/images/image-768.jpg 2x
" alt="[…]">

And this is good and correct way we know, but what we can do when image goes outside container even they have srcset attribute?

Here is example:

CSS and responsive images

We must ensure the image is fluid, but up to a limit! Solution: the CSS max-width rule. By this rule, we will indicate the image width in pixels, at the most, 100% of the width of the container. Here is example:

img {
  max-width: 100%;
  height: auto;
}

WordPress and responsive images

For WordPress by adding code below to style.css file in theme directory:

.entry-content img,
.entry-summary img,
.comment-content img,
.widget img,
.wp-caption {
  max-with: 100%;
  height: auto;
}

HubSpot and responsive images

For HubSpot: Open Settings > Website(sidebar) > Pages(sidebar) > Templates(tab) > Site head HTML(section) and paste the final code to Site head HTML editor:

<style>
  .body-wrapper img {
    max-with: 100%;
    height: auto;
  }
</style>

This is it, it should resolve the issue with oversized images. Here is example on CodePen, how its work:

This is it! Hope my post have been helpful, stay safe, andMay the 4th be with you,
Alex