Menu
Let's say we have image with 2000px width & 500px height in css property. For a 1080p monitor how can I configure this image properly. I want this image to be set on any screen size for responsive design.
390
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
How to resize the image to a specific aspect ratio? In the Crop Image section, select one of the available ratios from the Aspect Ratio menu or add a custom one. Then click the Resize image to aspect ratio option to resize the image instead of cropping it.
This is what you want:
img {
width: 100%;
height: auto;
}
If you want your image to be scaled differently (or add/override certain styles for more responsivenss) in different devices you need to use CSS media queries. Eg.
img {
display: inline-block;
width: 25%; // Show 4 images in a row normally
height: auto;
}
@media (max-width: 600px) {
img {
width: 100%; // Override width to show only one image in a row on smaller screens
}
}
Mozilla Documentation on CSS media queries
W3Schools tutorial on CSS media queries
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
