I have a div that is set to 100% the height of my window, and a max-width of 66% of the window's width. html and body are set to 100% and overflow:none, so there's no scrolling permitted/possible.
I want to be able to scale an arbitrary <img> to fill as much as the space as possible. I'd prefer not to use background images, due to existing JS code that interacts with the <img> element.
This seems like an obvious starting point:
<img style="height:100%;max-width:66%">
But the max-width seems to come from a percentage of the browser's HEIGHT, rather than its width. And it won't keep its aspect ratio, which is definitely an undesired effect!
I could use JS to accomplish this task, but would prefer a CSS solution if there is one? It seems like it should be simple, but I have a feeling it's not...
If the img is within the div, then it's using 66% of the width of the div, which is already 66% of the width of body if I understand correctly. You can also make images resize automatically and maintain their aspect ration by setting img {width: auto; max-width: 100%;} within your CSS, leaving the height unchanged.
When setting percentage-based widths on an element, the width is typically calculated based on the width of the element's parent, which is why your image may have looked smaller than you expected.
I found an answer that I like over here:
https://stackoverflow.com/a/26648877/1058739
Quoted in case his answer disappears:
Here's a hackish solution I discovered:
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
This will enlarge the image tenfold, but restrict it to 10% of its final size - thus bounding it to the container.
Perfect for my needs, I think.
Related
I have an iframe that I want to allow to be as wide as the display requires. I have it inside of a section, and have the following in a sass file:
iframe
max-width: 100%
where the real width, otherwise is controlled by the section. Now, on very narrow displays, like a smartphone, this works fine. However, the height of the iframe goes crazy in this case. Is there a way to ensure that the height of the object cannot get become larger than it's width? That is, is there a way to access what 100% width actually is? I wish I could do something like this
iframe
max-width: 100%
max-height: max-width
Edit:
Please see here for a working example:
http://jsfiddle.net/ptzyjmb1/5/
Notice how the first embedded object is wider than square. The second is about square. and the last is taller than square. I just want some option for max-height that will result in the third object (the "tall" video) to be square. That is, I want to be able to set the width to whatever I (or the display) would like, and the height will not be allowed to exceed that value.
I do not want to enforce that height = width, just that height <= width
Use the vh and vw attributes (view-height and view-width):
iframe {
max-width: 100vw;
max-height: 100vw;
}
If, as #Anonymous pointed out, the iframe is the child of some parent element that is not 100vw across, you can just use the div's width as the width of the iframe:
div {
width: 50%
}
div iframe {
max-width: 50vw;
max-height: 50vw;
If the width of the parent div is constantly changing, there is probably some JS being used. If the width of the parent element is represented in a variable, as it should be, then JQuery can sort out the problem, as follows:
setInterval(function() {$("div iframe").css("max-width",String(divwidth)+"vw");, 10)
I've got an image whose height is set as 100%. This makes the image display correctly as I would expect so long as there's plenty of width. However, when the screen's width is reduced eventually the image loses it's ratio because the width is squished while the height still remains 100%. I would like to have the image always stretch to the maximum size possible within the container without losing it's ratio. In other words, it the width is the limiting factor, the image should use 100% width and maintain ratio, but if the height is the limiting factor, than the image should use 100% height while maintaining its ratio, and it should be able to switch between these. Is there a way to do this purely in CSS? Thanks!
This should keep the correct ratio (providing you don’t need the height to be set to 100% for some reason).
img{
width: 100%;
height: auto;
}
--EDIT--
If you want to retain a consistent height of the parent element then you can either:
Hide the overflowing image using overflow: hidden;. Although this
means you will lose some of the image at larger sizes. See
example.
Use max-width and max-height to stop the image growing at a
certain point. This means you will potentially be left with some
white space in the design. See example.
My problem is more or less identical to this question, but with the slight difference that I need to vertically resize it.
What I mean is; according to the information supplied in the article I linked to, the DIV will resize while keeping the aspect ratio if you stretch/contract the browser width, but not if you make the browser window taller/shorter (ie, its height) - I wonder if it's possible to make this work in a CSS-only environment.
TYIA.
If you are dealing with just an image, then setting its width to 100% and removing its height will keep its aspect rate, but obviously will also degrade its quality at great stretchings.
Like this:
img {
width: 100%;
height: auto;
}
No, this isn't possible.
The closest thing that is possible is described in the answer to this question: Make an element's width relative to its height?
...however, that requires introducing an img tag into the source.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D
I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.
Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there - is there a way to also do this in a CSS flow layout?
A quick test shows that this:
<img class="test" src="testimage.jpg" />
combined with:
img.test { width: 50%; }
Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:
img.test { height: 50%; }
In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.
EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.
Think of it this way:
body is 100% of window size.
img is 50% of body.
img is 50% of window size.
Now suppose I add a div. like this...
<div class="imgbox" style="width: 100px;">
<img class="test" src="testimage.jpg" />
</div>
Then
body is 100% of window size.
div is 100px, ignoring body width.
img is 50% of div.
img is 50px, regardless of window size.
If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.
bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?
Try setting max-width to something like 95%. Thank way the image will shrink when the container width is less then the width of the image. All of the parent containers would need to adju
max-width:95%;