3

アスペクト比を維持しながら、img タグの幅と高さをオーバーフロー隠し div 内で 100% にする必要があります。

私が到達したのは、オーバーフローの非表示の div 内に画像を配置することです。画像は最大幅 100% で高さは自動です。

<div id="foo">
    <img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" />
</div>

しかし、私が直面している問題は、高さ100％にならないことです

ここに画像の説明を入力

実際のコードを見てください http://fiddle.jshell.net/TARwL/

そして、div#cover をよく見てください。幅は 100% で、高さは完璧な外観です。私のコードが同じことをするのを見たいと思います。

古いブラウザではbesideが機能しないため、background-size:coverメソッドを使用できません。右クリックして画像を保存することはできません。これは私にとって重要です

4

5 に答える 5

1

これにはスクリプトを使用する必要があると思います。（中央の背景画像を使用したい場合を除く）

Working Fidlle [さまざまな縦横比で、好きな画像で試してください]

JQuery

var img = $("#foo > img");
var ratio = img.width() / img.height();
var limit = (100*ratio)+"%";
var margin = ((1-ratio)*50)+"%";

if( ratio > 1)
{
    img.css({"width": limit, "margin-left": margin});
}
else
{
    ratio = 1 / ratio;
    img.css({"height": limit, "margin-top": margin});
}

編集：

このフィドルは一度に複数の画像をサポートします（fooクラスを使用します）

于 2013-09-16T23:11:21.087 に答える