0

如何使用浏览器更改大小自动调整 img 组的大小？

我几乎在css中完成它，但现在我无法设置溢出：隐藏让第5个或第6个..图片隐藏。


（来自 php 的 img）
（我将连接 jQuery 插件scrolling-carousel。）

任何建议我都非常感谢你抽出时间。


这是我的http://jsfiddle.net/uSHbc/1/
HTML

<div class="conimgwrap2">
    <div class="conimgwrap">
        <div class="conimg">

            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>                
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>                
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>

        </div>
    </div>
</div>​

CSS

.conimgwrap2{
    position: relative;
    left: 50%;
    width: 50%;
}
.conimgwrap{
    position: absolute;
    width: 25%;
    height: 25%;
}

.conimg{
    max-width: 100%;
    max-height: 100%;
    background-color: yellow;
    display: inline;
    white-space: nowrap;
}

.conimg div{
    display: inline;
    white-space: nowrap;
}
.conimg img{
    max-width: 100%;
    max-height: 100%;
}​
4

3 回答 3

0

我不明白你的意思“我几乎在 css 中完成它，但现在我无法设置溢出：隐藏让第 5 或第 6 .. 图片隐藏。”

但是，如果您想通过浏览器更改大小来调整图像大小，您可以使用以下 css 来完成。

.conimg img{ 最大宽度：100%；高度：自动；}​</p>

谢谢你。

于 2012-11-06T10:22:14.033 回答
0

我会这样做：

.conimg div{
    display: inline-block;
    max-width: 20%; /* (100% / the number of divs) */ 
}
.conimg img{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 hack */
}​

这将在图像容器的父级内创建等距的 div（在您的示例中为 5 个元素），并且在调整窗口大小时，图像及其容器都将按比例放大/缩小。

演示
http://jsfiddle.net/buqqn/

于 2012-11-07T19:23:34.947 回答
0

内-

显示：内联；
最大宽度：_%；
最大高度：100%；

外-

空白：nowrap；
和位置集学习如何从http://www.alistapart.com/articles/conflictingabsolutepositions

于 2012-11-07T19:25:08.373 回答