Menu
If your image doesn't fit the layout, you can resize it in the HTML. 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.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
Only set the width or height, and it will scale the other automatically. And yes you can use a percentage.
The first part can be done, but requires JavaScript, so might not work for all users.
CSS is enough:
img {
width : desired_width;
height: auto; /*to preserve the aspect ratio of the image*/
}
I know that this question has been asked for a long time but as of today one simple answer is:
<img src="image.png" style="width: 55vw; min-width: 330px;" />
The use of vw in here tells that the width is relative to 55% of the width of the viewport.
All the major browsers nowadays support this.
Check this link.
IE6 Internet Explorer 6
Percent only works for the width of an element, but height:100%; does not work without the correct code.
CSS
html, body { height:100%; }
Then using a percentage works properly, and dynamically updates on window resize.
<img src="image.jpg" style="height:80%;">
You do not need a width attribute, the width scales proportionately as the browser window size is changed.
And this little gem, is in case the image is scaled up, it will not look (overly) blocky (it interpolates).
img { -ms-interpolation-mode: bicubic; }
Props go to this source: Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
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