3

Web ページに 3x3 グリッド形状の 9 つの画像があります。現時点では、ワイドスクリーンのラップトップで表示しているときは問題ないように見えますが、小さいデバイスで表示すると、レスポンシブであるため、画像が重なり合って表示されます。画像を積み重ねるのではなく、一緒に縮小したい (そして 3x3 グリッドのままにしたい)。どこから始めればよいかさえわかりません。
前もって感謝します！

申し訳ありませんが、コードにはあまりありません。私のセクションは幅 940 ピクセルで、各画像の幅と高さは 300 ピクセルです。

<section id="picture">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
<img src="8.jpg">
</section>
4

2 に答える 2

3

最良の方法は、、およびパーセンテージを使用するdisplay:inline-blockことmax-widthsです

デモhttp://jsfiddle.net/kevinPHPkevin/Ptqde/

section {
    max-width:300px;
}
img {
    max-width:80px;
    display:inline-block;
    width:30%;
}
于 2013-05-31T21:38:29.610 に答える
-1

これを実装する方法のサンプルを作成しました。

HTML コードは単純な順序付けられていないリストでli、ul. CSS は、固定サイズの親内のパーセンテージ ベースのルール セットです。

li {
    width:33%;
    height:33%;
    top:33%;
    list-style:none;
    position:absolute;
}
li:nth-child(-n+3) {
    top:0;
}
li:nth-child(n+7) {
    top:66%;
}
li:nth-child(3n+2) {
    left:33%;
}
li:nth-child(3n+3) {
    left:66%;
}

私の例では、固定の背景を使用してそこに画像を配置しました。このアプローチにより、要素が常に正しいサイズになることが保証されるためbackground-size:cover、要素に何でも配置できることがわかります。li

于 2013-05-31T21:34:45.437 に答える