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>
Related
I have two sass variables for width and height of a certain div:
$width: 277.98px;
$height: 156.36px;
I want to convert this into some kind of ratio so that when adjusting the size of the screen, height and width are always proportionate to each other. The issue I was having was when trying to adjust width/height using viewport height or width (vh/vw) I kept getting errors like:
SassError: 27798px*vh isn't a valid CSS value.
Another issue is that I don't really understand how adjusting these dimensions by vh/vw even really works. What I'm looking for is the best way to go about adjusting the width and height of my div, so that they get bigger and smaller when changing screen size, but that they also stay proportionate to their original values (ratio-wise)
aspect-ratio is built into css.
In this example, .box has a height of 112.484px because it is constrained by its parent div's width of 200px.
.wrapper {
width: 200px;
}
.box {
aspect-ratio: 277.98 / 156.36;
background: blue;
}
<div class="wrapper">
<div class="box">
</div>
</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 have an image at the top. I want it to be wide from left to right. Despite all kinds of change in the css settings, I can't get the full height of the image, but full width is working.
The size of the image is 1920 x 400 px, but when I measure the image, the height is only 345 px. Is it about proportions or what? I have tested to change the width of the image, but I still get the height of 345 px!
My questions are: Can I get full height of the image and what is the optimal size in width when using a wide image? I guess it's not necessary tp have 1920.
HTML:
<div id="start">
<img class="start" src="bilderGuide/bilderLayout/start.jpg" />
</div>
My CSS:
#start
{
width: 100%;
height: auto;
}
img.start
{
width: 100%;
height: 100%;
}
Do you mean something like this?
jsFiddle
I just set the css property's off the image to
min-height: 100%;
min-width: 100%;
So it fills the page.
Or isnt that what you mean?
EDIT:
New jsFiddle
When you define a 100% size in an element wrapped inside another, it can occupy it's parent size. The 100% width in this case, as it is an image, will take all #start available width and proportionally adjust it's height (at least in most browsers).
There are a few tricks you can use, depending on the result you want:
#start {width:960px;overflow:hidden;margin:0 auto;}
img.start {/*reset max-min height if any*/ max-height:none;max-width:none;}
Image, then, will use it's real height and get masked with the #start width, since any overflow is hidden.
The idea, in general, is to have a wrapper element of the image and then play with the image css attributes depending on the result you want.
As for the optimal size, I would guess even a smaller width (1600px or so) would be enough but it all depends on the result you want.
Edit:
For a standard height, full width image you may use:
#start {width:100%;overflow:hidden;margin:0 auto;height:300px;}
img.start {min-height:300px;min-width:100%}
jsfiddle link
Edit 2:
To get a full width and full height image masked, you'll need to absolute - position the wrapper of the images.
#start {width:100%;height:100%;overflow:hidden;margin:0;padding:0;position:absolute;}
img.start {min-height:100%;min-width:100%;}
another fiddle
Try this
#start {
width:100%;
height:100%;
display:inline-block;
}
img.start {
min-height:100%;
min-width:100%;
}
Is there any way to get the following effect using CSS?
When container's width is less than image's original width, set image's width to 100% of container's width.
When container's width is larger than image's original width, set image's width to it's original wdith.
May be you can do like this:
for example:
img{
width:100%;
height:auto;
max-width:400px;
}
check this http://jsfiddle.net/aqh2r/
I found that the following CSS code could achieve the goal. But according to CSS Standard, when the value of max-width is percentage, it is "calculated with respect to the width of the generated box's containing block". According to my understanding, set max-width to 100% should take no effect, but it seems wrong.
img{
width: auto;
max-width: 100%;
}
The code is tested in Firefox 12 and IE 9. See http://jsfiddle.net/EnZEP/
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.