0

CSS で、可変サイズの画像の右側に多数の画像 (垂直に積み重ね) を配置する簡単な方法はありますか。可変サイズの画像にはmax-width、ブラウザ ウィンドウのサイズに関連する定義があります (つまり、画面からはみ出さないようにできるだけ大きくする必要がありますが、実際の画像のピクセル寸法よりも大きくしないでください)。これをより困難にするために、マークアップはすべて<img>の s が等しいものとしてリストされるようになっています。つまり、右側に表示される画像は別のコンテナにありません。

ここに画像の説明を入力

次のようなマークアップを使用すると、各画像のサイズはほぼ同じになります。

<ul>
<li><img/></li> <!-- the big image -->
<li><img/></li>
<li><img/></li>
etc...
</ul>

リクエストにより、jsFiddle で: http://jsfiddle.net/2p9gR/

純粋な CSS(3) でこれを行うとよいでしょう。私自身 (最新の Chrome) 以外のブラウザーをサポートする必要はありません。

おー。そして、それが真実であれば、答えとして「いいえ」を受け入れます。

4

2 に答える 2

1

あなたの写真を考えると、私は次の解決策を思いつきました：

HTML

<div class="container">
    <div class="main-image"><img src="http://lorempixel.com/800/800/sports/1/" /></div>
    <ul class="small-image-list">
        <li><img src="http://lorempixel.com/120/120/sports/2/" /></li>
        <li><img src="http://lorempixel.com/120/120/sports/3/" /></li>
        <li><img src="http://lorempixel.com/120/120/sports/4/" /></li>
        <li><img src="http://lorempixel.com/120/120/sports/5/" /></li>
    </ul>
</div>

CSS

.container {padding-right:150px;}
.container .main-image {width:100%; float:left;}
.container .main-image img {width:100%; max-width:800px; max-height:800px;}
.small-image-list {list-style:none; margin:0 -150px 0 0; padding:0; width:120px; float:right;}
.small-image-list li {width:100%; overflow:hidden; padding-bottom:10px;}

@media all and (min-width: 950px) {
        /*this is optional if you want the images to stick left when the page is over 950px;*/
    .container {padding:0;}
    .container .main-image {width:800px;}
    .small-image-list {margin:0 0 0 30px; float:left;}
}

例

大きなガターが必要な場合は、メディアクエリを削除してください

編集

すべてをリストに入れる必要がある場合、これを試すことができます：

HTML

<ul class="list">
    <li><img src="http://lorempixel.com/800/800/sports/2/" /></li>
    <li><img src="http://lorempixel.com/120/120/sports/3/" /></li>
    <li><img src="http://lorempixel.com/120/120/sports/4/" /></li>
    <li><img src="http://lorempixel.com/120/120/sports/5/" /></li>
</ul>

CSS

.list {list-style:none; padding:0 150px 0 0; margin:0;}
.list li {width:120px; float:right; padding:0; display:block; overflow:hidden; margin-right:-150px;clear:right; display:block;}
.list li:first-child {width:100%; float:left; margin:0; padding:0;}
.list li:first-child img {width:100%; max-height:800px; max-width:800px;}

リストの例

于 2013-09-09T15:15:51.763 に答える