[解決済み] [Solved] How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?

Question

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="url" style="width: 100%;">

or

<img src="url" 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> は、サイズが画面に対するパーセンテージで設定されており、これも予測不可能です。

解決方法は？

2019年にアップデートします。

を使用できるようになりました。 object-fit css プロパティは、以下の値を受け付けます。 fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

例として、画像を格納するコンテナがあるとします。

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}