How to resize images for responsive web design
Ensure that your images stay sharp and pixel-perfect on every screen size by resizing them with CSS,
or intuitively on Editor X.
Illustration for Shaping Design article
Option 1: Resize with the image width attribute
When you’d like to fit images in relation to its parent container, you can use the CSS width attribute
to resize them.
Here’s how our image looks without any sizing or fit specifications:
Here’s how it looks when we use the CSS width attribute:
Option 2: Resize with the max-width property
Using the max-width property allows the image to maintain its exact aspect ratio and proportions, making it a great fit for responsive web design.
In order to make an image fit into the boundaries of the page, use the “no-repeat” background-repeat property.
Stretch: Use the “100% 100%” background-size property to accomplish the following:
Cover: Use the “cover” background-size property for scaling the background image to fit the entire space.
How to resize images on Editor X
Under “size,” choose the “fluid” option so you can resize your images
and scale them proportionally while doing so.
Stretch the image
To looking full-width, like this:
Focal point: The focal point tool allows you to choose which part of your graphics
stay in focus as the screen size changes.
