0

小さな div (例: 200px x 200px) といくつかの動的に表示される画像: 風景、ポートレート、またはパノラマの寸法 (例: 600px X 300px; 200px X 600px ; 2000px X 300px) CSS を使用して、それらすべてを div に収める必要があります。私は持っている：

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

とCSS

.container {
width: 200px;
height: 200px;
overflow:hidden
}
img.container {
min-height:100%;
min-width:100%;
}

しかし、大きな画像はdivよりもはるかに大きくなります。max-height と max-width を 100% にすると、画像がスターチされます。基本的に、より大きな次元を親divの100%に等しく保つ必要があります。そして画像の一部を表示します。JSなしでそれを行うにはどうすればよいですか?

4

1 に答える 1

0 
img.container

コンテナ クラスの img タグを選択しますが、html には何もありません。使用するつもりでしたか:

.container img {

コンテナ クラスを持つ要素に含まれる img を選択するには? 設定した場合:

.container img {
 width: 100%;
 height: auto;
}

画像の幅は div に収まる必要がありますが、高さを短くして、div の背景の一部を表示したままにすることができます。画像の一部を切り取る。

編集：あなたが望む正確な効果は、javascriptなしでは達成できないと思います. ページ準備機能中に onload ハンドラーを img 要素に追加すると、src が変更されたときに各画像を自動調整できます。この jquery スニペットは、次のことを実現します。

$(function() {
        $(".container img").on('load',function() {
            if ($(this).height() > $(this).width()) {
                $(this).css('height','auto').css('width','100%');
            } else {
                $(this).css('height','100%').css('width','auto');
            }
        })
    })

ここにデモンストレーションするjsfiddleがあります

于 2013-06-17T21:52:10.607 に答える