CSS を使用して次の効果を得る方法はありますか?
- コンテナーの幅が画像の元の幅よりも小さい場合、画像の幅をコンテナーの幅の 100% に設定します。
- コンテナの幅が画像の元の幅よりも大きい場合、画像の幅を元の幅に設定します。
CSS を使用して次の効果を得る方法はありますか?
あなたはこのようにすることができます:
例えば:
img{
width:100%;
height:auto;
max-width:400px;
}
これをチェックしてくださいhttp://jsfiddle.net/aqh2r/
次のCSSコードで目標を達成できることがわかりました。ただし、CSS標準によると、max-widthの値がパーセンテージの場合、「生成されたボックスを含むブロックの幅を基準にして計算」されます。私の理解によると、max-widthを100%に設定しても効果はありませんが、間違っているようです。
img{
width: auto;
max-width: 100%;
}
コードはFirefox12およびIE9でテストされています。http://jsfiddle.net/EnZEP/を参照してください。