0

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...

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Codemonkey
  • 4,455
  • 5
  • 44
  • 76
  • if the image has not 2:3 ratio (e.g. a square) how should be adapted to keep the aspect? Cropped at both the sides? – Fabrizio Calderan Feb 23 '16 at 15:09
  • max-width should be 100%, so it covers its container itself set at 66%, isn't ? if you want it to be clipped then it turns min-width:100%; and min-height:100%; to fill container. container needs overflow:hidden too ... Can you clarify your question and drop your actual HTML structure ? – G-Cyrillus Feb 23 '16 at 15:14

2 Answers2

0

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.

shamsup
  • 1,952
  • 14
  • 18
  • True, I got a bit muddled I think. However, your solution won't "grow" the image to fit 100% of the browser height, when the aspect ratio allows. I want the image to be as big as possible, without being more than 100% of the browser height or 66% of the browser width. – Codemonkey Feb 23 '16 at 15:17
  • This will allow the image to be as tall as possible, even up to 100% of the browser height as long as its width is less than 66% of the browser width, which is exactly what you said you need. – shamsup Feb 23 '16 at 15:23
  • Unfortunately not quite. I want to *scale up* small images, if needed. This constrains them, but doesn't scale them to fit. – Codemonkey Feb 23 '16 at 18:40
0

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.

Community
  • 1
  • 1
Codemonkey
  • 4,455
  • 5
  • 44
  • 76
  • If this works for you, that's good. However, I must say your original question had contradictory demands: you wanted to keep the aspect ratio of the graphic, and a height of 100%, but that means you can't control the width at all. Setting the width too means you have to give up on either the height, or the aspect ratio! – Mr Lister Feb 28 '16 at 16:55