1

いくつかの小さな画像を載せるページをデザインしています。それらを2列にして、ウィンドウの変更に合わせて拡大/縮小したい。

私のjsFiddleを見てください:

ウィンドウのサイズを変更すると、画像が移動し、ウィンドウが小さい場合は列が 1 つだけになり、ウィンドウが非常に広い場合は多くの列が表示されることに気付くでしょう。この動作の代わりに、常に 2 列になるように画像のサイズを変更したいと思います。

幅を45％に設定するのは簡単なケースだと思いました...どうやらそうではありません。

フィドルのコードは次のとおりです。

<div id="Thumbs">
<ul>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
</ul>

-

#Thumbs ul {
list-style: none;
}
#Thumbs ul li {
float:left;
margin: 10px 0 0 5%;
}
#Thumbs ul li img {
/*
How do you resize the images?
*/
}
4

3 に答える 3

0

サイズを親の100％に設定すると、うまくいくはずです。

#Thumbs ul li img {
    width: 100%;
    height: 100%;
}

テストされていません！

于 2013-01-26T19:40:37.953 に答える
0

heightCSS でandwidthを 100% に設定します。

#Thumbs ul li img {
    height: 100%;
    width: 100%;
}

ここで編集を参照してください。

これらのスクリーン ショットで変更を確認できます。

ここに画像の説明を入力 ここに画像の説明を入力

于 2013-01-26T19:43:08.587 に答える
0

http://jsfiddle.net/johnkoht/jHm8w/3/

画像の幅を 100% に設定するのが良いスタートです

#thumb ul li img {
  width: 100%;
}

あなたのliスタイルを次のように更新しました：

#Thumbs ul li {
  display: inline-block;
  margin: 10px 0 0 5%;
  width: 44.6%;
}

なぜliマージンをに設定したのかわかりませんmargin: 10px 0 0 5%;が、そのままにしておきました。表示と幅を更新しました。右の列を右に揃える必要がある場合は、追加してみてください

#thumbs ul li:nth-child(2n+2) {
  float: right;
}

それが役立つことを願っています。

于 2013-01-26T20:00:30.910 に答える