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

【问题标题】：How to auto resize img group with browser change size?如何使用浏览器更改大小自动调整 img 组的大小？
【发布时间】：2012-11-08 03:28:37
【问题描述】：

如何根据浏览器的大小自动调整 img 组的大小？

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

（来自 php 的图像）
（我会连接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%;
}

【问题讨论】：

你已经完成了。通过将 max-height & max-width 设置为 100%，图像将根据浏览器大小调整大小。
但是我找不到隐藏img溢出img组容器的方法。
如果你想隐藏那个img组的溢出，把overflow:hidden;在 .conimg img{} 内
您究竟是想隐藏那张图片还是将溢出设置为隐藏？ overflow 属性指定如果内容溢出元素的框会发生什么。

标签： jquery html css

【解决方案1】：

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

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

.conimg img{ 最大宽度：100%;高度：自动；}

谢谢。

【讨论】：

我找不到隐藏某些img溢出img组容器的方法。
我认为你需要删除“max-width: 100%; max-height: 100%;”从“conimg”类开始，然后固定宽度和溢出：隐藏将起作用
为此您需要使用媒体查询调整 div 的大小

【解决方案2】：

内-

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

外-

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

【讨论】：

【解决方案3】：

我会这样做：

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

【讨论】：