So I want to scale an image down with css into the size of a container, while maintaining its aspect ratio. It seems easy enough to achieve this when specifying the minimum height OR width, but not both. Any ideas?
Find out if the height is less or the width is less; whichever dimension is less, set that property of the img but not the other. Assuming you aren't setting the size of the img in CSS, this should maintain the aspect ratio while making the image as large as possible within the constraints of the container. This code assumes your container is a div.
var height = $('#divImg').Height();
var width = $('#divImg').Width();
if (height > width)
{
$('#divImg img').Width(width);
}
else
{
$('#divImg img').Height(height);
}
EDIT:
If you aren't using jQuery, you can use the following CSS trick to maintain aspect ratio. Change 100px to the size of your container:
#divImg img {
height: 100px;
width: auto;
}
#divImg img {
height: auto;
width: 100px;
}
Borrowed from CSS styling image height and width while maintaining aspect ratio.
Related
I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?
the scrollBar appears because of the overflow you can do 2 things
use the "overflow: hidden;"
body{
overflow: hidden;
}
you can use max-width to determine the max-width of the element and set it on both of the elements
I hope it was helpful 😁
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>
Why does the height of an image also change in CSS when I only change the width. I changed the width of an image using the following code:
img{
width: 25%;
}
And it not only made the width change but also the height of the image.
the object size is calculated on its given values. when you only define the width, then the missing height value is determined by its given aspect ratio.
further read:
If the specified size defines only the width or only the height, the
missing value is determined using the intrinsic ratio, if there is
any, the intrinsic dimensions if the specified value matches, or the
default object size for that missing value
https://developer.mozilla.org/en-US/docs/Web/CSS/image
This is done to preserve the aspect ratio while resizing images.
when you are specifying the width to 25% the height is set to auto.
img {
width: 100%;
height: auto;
}
You can specify both the height and width explicitly but that sometime causes it to lose its aspect ratio and responsiveness for different available widths. Therefore the image won't look as it was intended to be.
Note: You can do the opposite set width as auto, but most layouts are generally width constrained and not height.
If you want avoid this behavior you must apply a fix height to the image. like that:
const bt = document.querySelector('button');
let i = 10;
bt.addEventListener('click', function() {
const img = document.querySelector('img');
img.style.width = i + "%";
i++;
});
img {
height:200px;
}
<button>increase by 1%</button>
<div>
<img src="https://via.placeholder.com/200">
</div>
I have a set of logos of variable size. I've set them all up at the same height of 50px with a width of auto:
.img-logo {
width: auto;
height: 50px;
}
This works fine until the window is resized. When the window is resized, wider logos flow outside of their container.
I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:
.img-logo {
max-width: 100%;
width: auto;
height: 50px;
}
This works but the aspect ratio is compromised due to the height property remaining 50px.
Any ideas?
With a fixed height and variable width either of the below can happen.
The img gets stretched to accommodate the variable width and skew the aspect ratio.
The img gets cropped (overflow:hidden) by the parent but the aspect ration is kept intact.
So you can make the img responsive too. But then it wont have the constant height, while keeping the aspect ratio intact.
I think it's impossible to keep its size when the window is too small and you didn't want to change ths size of image. Why not try #media,which can provide different css styles in different conditions.
I would like to have a CSS class and/or solution where the image is 100% width (with height being auto), but max its own size. Anyway to achieve that or do I need to specify max width image-by-image?
If you set:
width: 100%;
height: auto;
The image will be as bigger as its container is. The ratio between width and height will be kept.
If the image's width is lower then container's width then it will be scaled till it fits the available space. In this case you may want to use:
max-width: 100%;
height: auto;
This should do it:
img {
max-width: 100%;
height: auto;
}
If the window is bigger than the image, the image will not be scaled. If the window is smaller than the image, the image should scale. I noticed you said that it doesn't in your comment to Krasimir's answer. You might want to check and see if there is other CSS that may be changing this behaviour.
I have a Gall-Peters projection on my website. I want to give the image 100% of available width while keeping the height correct so that countries do not get elongated. What is the right CSS to keep the aspect ratio?
img {
width: 100%;
height: auto;
}
Simply width: 100%. The height of an image should automatically be set to keep the original aspect ratio.