div内に画像（img）を収め、縦横比を維持するにはどうすればよいですか？

私は48x48のdivを持っていて、その中にimg要素があります。部分を失うことなくそれをdivに合わせたいのですが、その間に比率が維持されますが、htmlとcssを使用して達成できますか？

CSSを書き込んでいるときに画像のサイズがわからない場合は、トリミングを防ぐためにJavaScriptが必要になります。

HTML＆JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

JavaScriptライブラリーを使用している場合は、それを利用することができます。

max-height:100%; max-width:100%;div内の画像に使用します。

残念ながら、max-width + max-heightは私のタスクを完全にはカバーしていません...したがって、別の解決策を見つけました：

スケーリング中に画像の比率を保存するには、object-fit CSS3プロパティを使用することもできます。

役立つ記事：CSS3で画像のアスペクト比を制御する

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

悪いニュース：IEはサポートされていません（使用できますか）

CSSのみを使用：

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

これにより、画像が親に合わせて拡大され、そのサイズはdivCSSで設定されます。

私はこれを機能させるために多くの問題を抱えていました、私が見つけたすべての解決策は機能していないようでした。

私はdiv表示をフレックスに設定する必要があることに気付いたので、基本的にこれは私のCSSです：

div{
display: flex;
}

div img{ 
max-height: 100%;
max-width: 100%;
}

CSSを試す：

img {
  object-fit: cover;
  height: 48px;
}

私にとっては、次のCSSが機能しました（Chrome、Firefox、Safariでテスト済み）。

一緒に動作するものは複数あります。

• max-height: 100%;、max-width: 100%;およびheight: auto;、width: auto;アスペクト比を維持しながら、最初に100％に到達する次元にimgスケールを設定します
• position: relative;コンテナ内とposition: absolute;子で一緒に持つtop: 50%;とleft: 50%;中央上部には、コンテナ内のimgの角を左に
• transform: translate(-50%, -50%); imgをサイズの半分だけ左上に移動し、コンテナ内でimgを中央に配置します

CSS：

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

写真を背景画像として設定すると、サイズと配置をより詳細に制御できるようになり、imgタグを別の目的に使用できます...

以下では、divを写真と同じアスペクト比にする場合、placeholder.pngはphoto.jpgと同じアスペクト比の小さな透明な画像です。写真が正方形の場合は1px x 1pxのプレースホルダー、写真がビデオのサムネイルの場合は16x9のプレースホルダーなどです。

質問に固有なのは、1x1プレースホルダーを使用してdivの二乗比background-sizeを維持し、背景画像を使用して写真のアスペクト比を維持することです。

background-position: center center;写真をdivの中央に配置するために使用しました。（写真を垂直方向の中央または下部に揃えると、imgタグ内の写真が見苦しくなります。）

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

余分なhttpリクエストを回避するには、プレースホルダー画像をdata：URLに変換します。

<img src="data:image/png;base64,..."/>

新しいバージョン、つまりBootstrap v4にはクラス「img-fluid」を使用できます。

また、Bootstrap v3のような古いバージョンでは、クラス「img-sensitive」を使用できます。

使い方：-

imgタグと：-

クラス = "img-fluid"

src = "..."

ここにすべてのJavaScriptアプローチがあります。正しく収まるまで画像を段階的に縮小します。失敗するたびにどれだけ縮小するかを選択します。この例では、失敗するたびに10％縮小します。

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

直接コピーして貼り付けてください。

私のために働いたのは：

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

画像がdivの外に出ないようにするためにinline-flexが必要でした。