---
title: "Mobile friendly Responsive images with CSS"
url: "https://alex.zappa.dev/blog/mobile-friendly-responsive-images-with-css/"
description: "Learn how to make responsive images in HTML and CSS. Discover how to prevent images from going outside the container. Find solutions for WordPress and HubSpot."
---

# Mobile friendly Responsive images with CSS

October 27, 2021

*   [#css](/tags/css/),
*   [#responsive-images](/tags/responsive-images/)

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:

![Responsive images issue](/_astro/responsive-images-issue.D7LW-CG2_ZeTWEm.webp)

_On screenshot, you can see classic issue with blogs on WordPress or HubSpot_

## 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!

May the 4th be with you,  
Alex

*   [PreviousKeep Track UTM parameters for HubSpot forms like Cookie Monster](/blog/keep-track-utm-parameters-for-hubspot-forms-like-cookie-monster/)
*   [Next Detect dark or light system mode](/blog/detect-dark-or-light-system-mode/)