38

大きな画像があります。独自のWebページに表示したいのですが、CSSを使用せずにこれを行うと、ページ全体がいっぱいになり、大きすぎて一度に表示できません（スクロールバーが表示されます）。ユーザーの画面の高さ（幅ではなく）に合うように縮小したいと思います。私は解決策を見つけましたが、これらは画面全体に合うように画像を引き伸ばします-アスペクト比を台無しにするので、これは望ましくありません。

基本的には、アスペクト比を保ちながら画像のサイズを変更したいと思います。どうすればよいですか？

4

4 に答える 4

45

に設定するだけwidthですauto：

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

これがフィドルです：http://jsfiddle.net/6Y5Zp/

于 2012-09-07T15:09:20.350 に答える
7

background-image で div を使用し、background-size: を設定できます。

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

これで、div サイズを好きなように設定するだけで、画像の縦横比が維持されるだけでなく、垂直方向と水平方向の両方で中央に配置されます。div にはタグ自体に width/height 属性がないため、css でサイズを設定することを忘れないでください。

ただし、background-size プロパティは ie>=9 のみです。

于 2013-05-30T13:59:37.660 に答える