Question

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

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

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

任何建议我真的很感谢你花时间。

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

Answer 1

我没有得到你的观点“我几乎在css中完成它，但现在我无法设置溢出：隐藏让第5或第6 ...图片隐藏。”

但如果您想使用浏览器更改大小重新调整图像大小，可以使用以下css。

.conimg img {max-width：100％; height：auto;}

谢谢。

Answer 2

我会这样做：

.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/

Answer 3

inner-

显示：内联;
      max-width：_％;
      max-height：100％;

外部 -

white-space：nowrap;
和位置集学习如何从http://www.alistapart.com/articles/conflictingabsolutepositions

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

3 个答案: