How to make images responsive when working with Figma layouts

Other Questions Figma
1

I’m having trouble making my website images fit properly on different screen sizes. I have a design from Figma that’s 1920x720 pixels, but when I view it on my MacBook screen, I have to scroll horizontally to see the whole image. This is really frustrating.

I’ve tried several CSS approaches to fix this:

.hero-image {
  width: 100%;
  height: 100%;
}

And also:

.hero-image {
  width: 100vw;
  height: 100vh;
}

I even tried using viewport units like this:

.hero-image {
  width: 100vmax;
  height: 100vmin;
}

But nothing seems to work. The image keeps its original size and doesn’t scale down to fit my viewport. Another issue I’m facing is that when I resize the browser window to be smaller, some elements get cut off instead of adapting to the new size.

I’m using a MacBook with a 19:10 display ratio. Has anyone dealt with similar responsive design issues when converting Figma designs to actual websites?

2

your css is prolly getting overridden by other styles. try adding !important to your width property or take a look in dev tools to see what’s really applying. also, check if there’s a min-width somewhere that’s keeping the image too big.

3

check if you’ve got max-width: 100% on your img tag. try adding object-fit: cover or object-fit: contain too - they’re great for fixing aspect ratio issues with figma exports.

4

Had the same issue moving from Figma to responsive web. Your image container probably has fixed dimensions blocking the scaling. Wrap your image in a container with max-width: 100% and check that no parent elements have fixed widths. Don’t set both width and height to 100% - use width: 100% and height: auto instead to keep the aspect ratio. Also check if CSS reset or normalize styles are messing with responsive behavior. Sometimes you need overflow-x: hidden on body or html to stop horizontal scrolling on mobile.

5

Viewport units can work, but you need to set them up right. Don’t use 100vw - it’ll cause horizontal scrolling. Instead, set your container to width: 100% and max-width: 1920px so it doesn’t blow past your original design width. For the image, use width: 100% and height: auto to keep the proportions. You’re probably constraining both dimensions - setting both width and height to 100% forces the image to stretch and look weird. Add display: block to your images too. It cuts out weird spacing issues. Make sure your body has margin: 0 and throw box-sizing: border-box on all elements so padding doesn’t mess up your layout math.