0

2つの画像のmax-widthをmax-width：50％に設定したこのコードがあります。最初は、幅：50％を設定した場合と同じように、各画像が画面の50％まで伸びると予想していましたが、動作は異なり、実際にはすべてのブラウザで一貫しています。

この振る舞いに妥当性はありますか？

追伸この振る舞いは実際に私が達成しようとしていたことなので、修正するものは何もありません

<img id="hplogo-img" src="//www.google.com/logos/2002/w_olympics_02-1.gif"><img id="hplogo-img2" src="//www.google.com/logos/2002/newyear02.gif">


    img
    {
    height:100px;
    max-width:50%
    }​

フレームをスライドさせてページを縮小および拡大します：http： //jsfiddle.net/fQjXV/

4

1 に答える 1

1

max-widthはまさにそれです-最大幅。アイテムが実際にその幅をとる必要はなく、それを超えないだけです。したがって、他の制限なしで、画像は、コンテナの50％を超えない限り、自然な幅（この場合はアスペクト比を100pxの高さと同じに保つようにスケーリングされます）になります。コンテナを縮小すると、最大幅はそれに伴って減少し、最大幅が画像のデフォルトの幅よりも小さくなると、画像はコンテナ幅の50％に縮小します。高さは明示的に設定されているため、変更されません。

于 2012-05-16T02:03:50.027 に答える