html - 浮动在可变宽度图像旁边

Question

在 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）。

哦。如果这是真的，我会接受“不”作为答案。

Answer 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;}

列表示例

Answer 2

这是一个部分解决方案。我需要考虑两种情况，它们取决于大图像的纵横比，纵向和横向。

案例 1 - 肖像

<ul class="portrait">
    <li class="first">
        <img src="http://placekitten.com/300/1000" />
    </li>
    <!-- the next two images should 'float' right of the first one -->
    <li>1
        <img src="http://placekitten.com/800/600" />
    </li>
    <li>2
        <img src="http://placekitten.com/800/560" />
    </li>
</ul>

ul.portrait {
    list-style: none;
    border: 1px solid blue;
    margin: 0;
    padding: 0;
    float: left;
}
ul.portrait li {
    border: 1px dotted red;
    width: 120px;
    float: right;
    clear: right;
    margin-left: 30px;
}
ul.portrait li img {
    width: 100%;
}
ul.portrait li.first {
    float: left;
    width: auto;
    border: 1px dashed blue;
    margin: 0;
}
ul.portrait li.first img {
    vertical-align: top;
    height: 100%;
    max-height: 800px;
}

案例 2 - 景观

<ul class="landscape">
    <li class="first">
        <img src="http://placekitten.com/1000/500" />
    </li>
    <!-- the next two images should 'float' right of the first one -->
    <li>1
        <img src="http://placekitten.com/800/600" />
    </li>
    <li>2
        <img src="http://placekitten.com/800/560" />
    </li>
    <li>3
        <img src="http://placekitten.com/800/560" />
    </li>    
    <li>4
        <img src="http://placekitten.com/800/560" />
    </li>
    <li>5
        <img src="http://placekitten.com/800/560" />
    </li>
    <li>6
        <img src="http://placekitten.com/800/560" />
    </li>
</ul>

ul.landscape {
    list-style: none;
    border: 1px solid blue;
    margin: 0;
    padding: 0;
    float: left;
}
ul.landscape li {
    border: 1px dotted red;
    width: 120px;
    float: right;
    clear: right;
    margin-left: 30px;
}
ul.landscape li img {
    width: 100%;
}
ul.landscape li.first {
    float: left;
    width: auto;
    border: 1px dashed blue;
    margin: 0;
}
ul.landscape li.first img {
    vertical-align: top;
    width: 100%;
    max-width: 600px;
}

可以使图像以正确的配置出现，但有一些限制。

由于正在使用浮动，当您使屏幕更窄时，右侧的缩略图最终将堆叠在大图像下方。ul这建议为包含块的父块指定最小宽度。

见小提琴：http: //jsfiddle.net/audetwebdesign/rsqW3/

问题的要点在于大图像的规则。在纵向情况下，您需要指定height: 100%and max-height: 800px，对于横向情况，您需要指定width: 100%and max-width: 600px。仅使用 CSS 无法完全区分。该calc()值可能会有所帮助，但尚未得到广泛支持。