规模 <img> 适合 <div> 约束-首选无背景图片

Question

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

Answer 1

You can use the css property object-fit.

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

See example here: http://codepen.io/afonsoduarte/pen/EaOROW

Answer 2

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%;} 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.

Answer 3

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.