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 回答