web-dev-qa-db-ja.com

親の寸法に合わせて画像を作成します

大きなサイズの写真がいくつかありますが、それらを親のサイズに設定したいと思います。一度親の寸法が1200x800である場合、写真の寸法を1200x800に設定したいのですが、whole画像も見たいです。親ディメンションが500x300の場合、画像を500x300などにしたいと思います。

これも可能ですか？親の寸法に合わせて画像を縮小または拡大したい。

ありがとう！

csscss3htmlimage
32
kfirba

必要なcssプロパティはmax-width：

Css

img {
    max-width:100%;
}

画像の周りにコンテナを追加して、overflow:hidden画像が定義された幅/高さより大きくならないようにします。

55
soyuka

このCSSを使用して、画像をスケーリングします。

img {
    max-width: 100%;
    max-height: 100%;
}
9
Morpheus

私は素朴かもしれませんが、これはこれほど単純ではありませんか？

img {
    width:100%;
    height:100%;
}
4
Jako

画像タグでこれを試してください

<img src="url.jpg" width="100%" height="100%" />

または、要素の背景を画像として設定し、同じことを行います。

3
Adam Brown

max-widthプロパティを使用しようとすると、以前のバージョンでバグが発生する可能性がありますIE

#custom img {
    max-width: 100%;
    max-height: 100%;
}
1
Crowlix