レスポンシブ Web サイトを作成しており、画像が列の最大 2/3 を占めるようにしたいが、幅が 300 ピクセル (または元の画像の幅よりも大きい) より小さくならないようにしたい。
私は次のCSSを使用しています：
img {max-width:66%;min-width:300px;}
Chrome + Firefox では、これは完全に機能します。非常に広い範囲から始めて、画像はアップロードされたサイズで表示されます。それが列の 2/3 になると、300px に達するまで縮小し始め、それ以上縮小しません。
IE10 では、画像は 300px を超えて縮小し続けます。300px は完全に無視されます。
min-width を優先する必要があることを IE10 が理解できる方法はありますか?
フィドル: http://jsfiddle.net/WHDsm/3/
width:66% のようなものを使用することはオプションではないことに注意してください.
max-widthこの場合、設定する必要はありませんwidth。
img {
width: 66%;
min-width:300px;
}
IE10 で動作します: http://jsfiddle.net/WHDsm/9/
「 width:66% のようなものを使用することはオプションではないことに注意してください.
ここにも少し論理的な問題があります。 通常、レスポンシブ レイアウトを使用して、ユーザーが定義した固定サイズを要素が超えたり、先行したりしないようにするためにオーバーライドすることを意味しmax-widthます。要素が特定のパーセンテージを超えることはできないと言うのは、パーセンテージがその親要素に対する比率で一定であるため、悪い形です。定義しない限り、常に親要素の 66% になります。min-widthwidthmin/max
設定により、親コンテナーが 300px から 1000px の間であるwidth: 66%; max-width: 1000px; min-width 300px;場合に、親コンテナーに基づいて値の範囲が与えられます。66%したがって、ユーザーが より大きい画像をアップロードできない場合width: 1000px;、画像が 1000px を超えて拡大されることはなく、画質の問題は発生しません。