0

単純に思えますが、私はこれを理解できないようです。親 div 内に水平方向に配置された 2 つの画像があります。各画像には幅、最小幅、最大幅が含まれ、親の幅は 100% に設定されています。画面幅によって親の幅が 50% に設定されている場合、両方の画像を縮小するにはどうすればよいですか? 例えば：

<!-- screen resized to 110px in width -->
<div style="width:100%; display:block">
  <!-- actual image width is 200px -->
  <img src="i.png" style="width:100%; min-width:100px; max-width:200px">
  <img src="i.png" style="width:100%; min-width:100px; max-width:200px">
</div>

ただし、親コンテナーが幅方向に収まらない場合、これは 2 番目の img を押し下げます。white-space を nowrap に設定すると、インラインのままになりますが、縮小されません。少し助けて？

縮小してインラインのままにする代わりに画像をラッピングする

4

2 に答える 2

0

画像に最小幅の 100px を指定したため、明らかに div の幅が 200px (質問では 110px) 未満の場合、2 番目の画像は別の行にドロップされます。縮小する場合はmin-width: 100px、イメージのルールを削除しwidthて 50% に設定する必要があります。これは、100% の場合、親コンテナーと同じ幅になるためです。

また、コードのもう 1 つの改善点をお勧めします。width:100%; display:blockこれらはすべてのブロック要素のデフォルト値であるため、ルールは必要ありません--div含まれています。

それを試してください：http://jsfiddle.net/TMyr9/2/

于 2013-07-24T19:54:55.897 に答える