css - 明示的な最大幅を使用しながら、画像が大きい場合にのみ親 div に合わせて拡大縮小する

Question

小さい画面で親 div に応じて画像を拡大縮小できますが、明示的な最大幅に制限することはできます。

img {
    max-width: 500px;
    width: 100%;
}

ただし、画像が親の div よりも小さい場合でも、div を埋めるために引き伸ばされます。

画像のサイズを事前に知らなくても、サイズが大きい場合にのみ 100% にスケーリングし、サイズが小さい場合は元のサイズを維持する方法はありますか?

Answer 1

Bootstrap (バージョン 3.x、おそらく他のバージョンも) を使用している場合は、使用することもできます

class='img-responsive'

<img>タグの をクリックして、親要素のサイズにサイズ変更します。

Answer 2

JavaScript を使用して、画像と div のそれぞれの幅/高さを見つけ、div に合わせて画像のサイズを変更します。

このコードを使用して高さを見つけ、この関数を作成できます。

function getHeight(id)
{
return document.getElementById("id").offsetHeight; // Change to .offsetWidth to gain width :)
}

次のように関数を呼び出します。

function resize()
{
var imgHeight = getHeight("img");
var divHeight = getHeight("div");

//Then ask:

    if(imgHeight > divHeight)
    {
    pic = document.getElementById("img");
    pic.style.height = divHeight;
    }
}

関数を呼び出すには何らかのアクションが必要ですが、うまくいくでしょうか? またはいくつかのonclickイベント？この画像をどのように使用するかによって異なります。

これが役立つことを願っています。それは仕事をすべきです。

注意:特定のタイプの要素を使用すると、Google Chrome は、幅が存在する場合 (CSS) に最大幅/最小幅を単純に無視することに気付きました! しかしいつもではない。

Answer 3

css に最小幅を追加します。

img {
    width:100%;
    min-width:50px;
}