0

レスポンシブ レイアウトの例として、次のページを用意しました:フレキシブル グリッド

今、私は自分のプロジェクトでこのページの画像と同じことをしたいと思っています。画面サイズが小さくなると、要素のサイズも変更する必要があります。

これらの要素の幅については、すべてがうまく機能します。でも身長は変わらない。サンプルページの作成者は、画像に単一の高さ属性さえ使用していないため、これをどのように達成したのだろうか。

これが私のコードです：

  • HTML

    <div id="wrapper">  
<ol>
    <li id="el-1" class="figure"><div class="element"><p class="heading">Lorem1</p></div></li>
    <li id="el-2" class="figure"><div class="element"><p class="heading">Lorem2</p></div></li>
    <li id="el-3" class="figure"><div class="element"><p class="heading">Lorem3</p></div></li>
    <li id="el-4" class="figure"><div class="element"><p class="heading">Lorem4</p></div></li>
    <li id="el-5" class="figure"><div class="element"><p class="heading">Lorem5</p></div></li>
    <li id="el-logo" class="figure"><div class="background"><p>LoremIpsum<br>Lorem</p></div></li>
    <li id="el-6" class="figure"><div class="element"><p class="heading">Lorem6</p></div></li>
    <li id="el-7" class="figure"><div class="element"><p class="heading">Lorem7</p></div></li>
    <li id="el-8" class="figure"><div class="element"><p class="heading">Lorem8</p></div></li>
    <li id="el-9" class="figure"><div class="element"><p class="heading">Lorem9</p></div></li>
    <li id="el-10" class="figure"><div class="element"><p class="heading">Lorem10</p></div></li>
</ol>

  • CSS

http://nopaste.info/d8a051e767.html

4

2 に答える 2

1

サンプルページでは画像を使用していますが、使用していません。その場合、例として使用することはできません。あなたの場合、divに高さを設定しないと、コンテンツが収まるように成長します。したがって、一緒にサイズを変更するには、テーブルを使用するか、javascript を使用できます (たとえば、一致する列を確認してください)。

于 2012-11-22T14:05:36.080 に答える
0

その

img {
    max-width: 100%;
}

ex-site-flexible.htmlの63行目。

含まれているAと同じ幅の画像になり、画像は自動的に正しく拡大縮小されます。

ただし、他の要素はそうではないため、これは画像でのみ行うことができます。

于 2012-11-22T14:13:47.193 に答える