大きなサイズの写真がいくつかありますが、それを親の寸法サイズに設定したいと思います。親ディメンションが1200x800である場合は、写真の寸法を1200x800に設定したいと思っていますが、全体のイメージを見たいと思います。私の親ディメンションが500x300の場合、イメージを500x300にしたいと思います。画像を親の大きさに合わせて作成する
これも可能ですか？親の次元に合わせて画像を縮小したり、拡大したりしたい
ありがとうございます！
したいCSSプロパティがmax-width次のとおりです。
のCss
img {
max-width:100%;
}
あなたは画像の周囲にコンテナを追加し、定義された幅/高さよりも大きい取得するには画像を防ぐためにoverflow:hiddenを設定することができます。
使用CSSのこのビットをあなたのイメージをスケーリングする：
img {
max-width: 100%;
max-height: 100%;
}
画像タグ
<img src="url.jpg" width="100%" height="100%" />
やイメージなどの元素のbackgoundを設定して、同じことを行うには、これを試してみてください。
私は素朴かもしれませんが、これほど単純ではありませんか？
img {
width:100%;
height:100%;
}
このコードにmax-widthとmax-heightも追加しても問題ありませんか？とにかく、これはdivに**全体の**画像を表示するつもりですか？ – kfirba
それはあなたのイメージコンテナに依存しています...ヒントのいくつかとバイブルを共有しよう;）。 – soyuka
@kfirba実際にはい、それは重要です。いくつかのブラウザは、初期値が設定されていない場合、 'max-'プレフィックス値を表示しません。 'width'が指定されていなければ' max-width'を無視します。これはイメージのためだけではなく、特定のブラウザタイプの特定の要素 – Martin
のmax-widthプロパティを使用しようとすると、これは、ここでこの男は、あなたが欲しいものです
#custom img {
max-width: 100%;
max-height: 100%;
}
かかわらず、以前のバージョンのIEのバグを与えるかもしれません。 – Michael
大丈夫です！これは動作します！アスペクト比を維持したい場合は、最大高さも使用する必要があります。ありがとう – kfirba
@kfirba私はそれを試みましたが、コンテナのアスペクト比を取っていて、画像そのものではありません。 –