Menu
I'd like to have an HTML page which displays a single PNG or JPEG image. I want the image to take up the whole screen but when I do this:
<img src="whatever.jpeg" width="100%" height="100%" />
It just stretches the image and messes up the aspect ratio. How do I solve this so the image has the correct aspect ratio while scaling to the maximum size possible ?
The solution posted by Wayne almost works except for the case where you have a tall image and a wide window. This code is a slight modification of his code which does what I want:
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
494
In the HTML, put the player <iframe> in a <div> container. In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9.
The Simple Solution Using CSS By setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained.
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to change the size of an image. Step 2: Now, place the cursor inside the img tag. And then, we have to use the height and width attribute of the img tag for changing the size of an image.
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. For example, the original image is 640×960.
Here's a quick function that will adjust the height or width to 100% depending on which is bigger. Tested in FF3, IE7 & Chrome
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width > myImage.height){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
You don't necessarily want to stretch in a certain direction based on which is bigger. For example, I have a widescreen monitor, so even if it's a wider image than it is tall, stretching it left-to-right may still clip the top and bottom edges off.
You need to calculate the ratio between the window width and height and the image width and height. The smaller one is your controlling axis - the other is dependent. This is true even if both axes are larger than the respective window length.
<script type="text/javascript">
// <![CDATA[
function resizeToMax (id) {
var img = document.getElementById(id);
myImage = new Image();
myImage.src = img.src;
if (window.innerWidth / myImage.width < window.innerHeight / myImage.height) {
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
// ]]>
</script>
It is also possible to do this with pure CSS using a background image and the background-size:contain property:
<head>
<style>
#bigPicture
{
width:100%;
height:100%;
background:url(http://upload.wikimedia.org/wikipedia/commons/4/44/CatLolCatExample.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
</style>
</head>
<body style="margin:0px">
<div id="bigPicture">
</div>
</body>
This has the benefit of automatically updating if the container changes aspect ratios, without having to respond to resize events (the Javascript methods, as coded here, can result in cutting off the image when the user resizes the browser). The <embed> method has the same benefit, but CSS is much smoother and has no issues with security warnings.
Caveats:
<img> element means no context menu and no alt text.background-size:contain is 9+ only, and I couldn't even get this to work in IE9 (for unknown reasons).background-* properties have to be specified in the same CSS block as the background image, so multiple images on the same page will each need their own contain, no-repeat, and center.
5
Try this:
<img src="whatever.jpeg" width="100%" height="auto" />
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
