I'm trying to display some large images with HTML img tags. At the moment they go off the edge of the screen; how can I scale them to stay within the browser window?
Or in the likely event that this is not possible, is it possible to at least say "display this image at 50% of its normal width and height"?
The width and height attributes distort the image -- as far as I can tell, this is because they refer to whatever attributes the container may end up with, which will be unrelated to the image. I can't specify pixels because I have to deal with a large collection of images each with a different pixel size. Max-width doesn't work.
This question is related to
html
image-scaling
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 :
width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
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
For an automatic letterbox/pillarbox in a fixed-size rectangle, use the object-fit CSS property. That is usually what I want, and it avoids using code to figure out which is the dominant dimension or — what I used to do — embedding an <SVG> element with an <image> child to wrap the content with its nice preserveAspectRatio options.
<!DOCTYPE html>
<html>
<head>
<style>
:root
{
--box-side : min( 42vmin, 480px ) ;
}
body
{
align-items : center ;
display : flex ;
flex-wrap : wrap ;
justify-content : center ;
}
body,html
{
height : 100% ;
width : 100% ;
}
img
{
background : grey ;
border : 1px solid black ;
height : var( --box-side ) ;
object-fit : contain ;
width : var( --box-side ) ;
}
</style>
<title>object-fit</title>
</head>
<body>
<img src="https://alesmith.com/wp-content/uploads/logos/ALESMITH-MasterLogoShadow01-MULTI-A.png" />
<img src="https://ballastpoint.com/wp-content/themes/ballastpoint/assets/img/bp-logo-color.svg" />
<img src="https://d2lchr2s24ssh5.cloudfront.net/wp-content/uploads/2014/01/GF19_PrimaryLogo_RGB.png" />
<img src="https://s3-us-west-1.amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg">
<img src="https://s3-us-west-2.amazonaws.com/lostabbey-prod/Logos/Logo_Port_SM_Circle_White.png" />
</body>
</html>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.
Adding max-width: 100%; to the img tag works for me.
I think the best solution is resize the images via script or locally and upload them again. Remember, you're forcing your viewers to download larger files than they need
The best way I know how to do this, is:
1) set overflow to scroll and that way the image would stay in but you can scroll to see it instead
2) upload a smaller image. Now there are plenty of programs out there when uploading (you'll need something like PHP or .net to do this btw) you can have it auto scale.
3) Living with it and setting the width and height, this although will make it look distorted but the right size will still result in the user having to download the full-sized image.
Good luck!
Source: Stackoverflow.com