1

div内の画像のフィッティングに関する投稿をたくさん読みましたが、まだ問題を解決していません:

コンテナー div の高さをブラウザー ウィンドウの高さに設定し、画像を flexslider に読み込むレスポンシブ Web デザインがあります。ほとんどの画像は、ブラウザのビューポートよりも大きくなります。

私の問題は、写真を幅に正しく合わせることはできますが、画像の高さが適切に調整されないことです。http://stineheilmann.dk/portfolio/shoes/を参照(写真 3 番)

アスペクト比を維持しながら、画像が常に含まれている div 内に留まるようにするにはどうすればよいですか?

4

2 に答える 2

2

ブラウザの制限はありますか？このデモのようなものをお探しですか?

CSS

.frame{width:300px;height:300px;padding: 2px; border:1px solid #ccc;margin:5px;}
.frame img{max-width:100%;max-height:100%;}

HTMLは次のようなものになります

<div class="frame">
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/>
</div>
<div class="frame">
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/>
</div>

更新: 異なる縦横比の 3 つの画像でデモを更新しました。これらは、div から歪んだりオーバーフローしたりすることなく、div に収まります。

于 2012-11-23T11:11:03.433 に答える
0

このCSSを次のセレクターに追加するだけです。

.flexslider .slides img {
    height:100%;
    ....
}
于 2012-11-23T11:11:40.633 に答える