html image size

How do you stretch an image to fill a while keeping the image’s aspect-ratio?

I need to make this image stretch to the maximum size possible without overflowing it’s <div> or skewing the image.

I can’t predict the aspect-ratio of the image, so there’s no way to know whether to use:

<img src="" style="width: 100%;">


<img src="" style="height: 100%;">

I can’t use both (i.e. style=”width: 100%; height: 100%;”) because that will stretch the image to fit the <div>.

The <div> has a size set by percentage of the screen, which is also unpredictable.

Update 2019.

You can now use the object-fit css property that accepts the following values: fill | contain | cover | none | scale-down

As an example, you could have a container that holds an image:

<div class="container">
<img src="" class="container_img" />
.container {
height: 50px;
width: 50%;
.container_img {
height: 100%;
width: 100%;
object-fit: cover;