データベースに動的に読み込まれる画像があります。これらの画像はすべて異なるサイズですが、独自の方法で調整したいと考えています。
画像を幅に合わせてから、残りを上下に移動させ、その上で全体をレスポンシブにしたいと思います。
1 に答える
0
何が必要かはわかりますが、既存のコードを見なければ、実際のソリューションを生成することはできません。
基本的に、各画像が生成されるときは、最初にそれを div でラップする必要があります。
次に、画像のサイズと、デスクトップで必要な幅に収まる数に応じて、1140px としましょう。生成したばかりの div にイメージ ボックスのクラスを指定し、そのボックスのスタイルを必要なサイズに設定します。幅方向に 4 つのボックスが必要で、マージンが 3.8% であるとします。
次に、すべての幅を計算してボックスの幅を見つけます... 4 つのボックスの間に 3 つの余白のギャップがあるため、3.8% * 3 = 11.4% となります... 100% - 11.4% = 88.6%
つまり、4 つのボックス間で分割する幅が 88.6% あることを意味します... 88.6% / 4 = 22.15%
したがって、ボックスの幅を 22.15%、右マージンを 3.8% にします。
4 番目のボックスごとにクラスを動的に生成するか、4 番目のボックス:nth-child()ごとに次のように指定する必要があります。margin-right: 0;
もちろん、これらのボックスは float: left などでレスポンシブ機能を実現し、すべてのボックスはコンテナー内にある必要があります。
メディア クエリを使用して、ボックスの幅を 2 ボックスまたは 1 列のボックスにします。
画像自体のトリミングに関しては、ボックスが作成され、サイズ (px 単位の高さ) が設定されoverflow: hidden;たら、画像ボックス コンテナーで定義して、残っているものを非表示にします。
于 2013-03-26T13:15:04.947 に答える