html - 使用 CSS 调整多个图像的大小

标签 html css

我有一个大图像拆分成许多小图像。如果调整浏览器窗口的大小,我希望它们一起调整大小。到目前为止我的代码是:

<!DOCTYPE html>
    <body>
        <style>
        .splitimage{
        max-height:100%;
        max-width:100%;
        width:auto;
        }
        .keeptogether{
        width:100%;
        overflow:hidden;
        white-space:nowrap;
        line-height:0;
        word-spacing:-4px; 
        }
        </style>
        <div class="keeptogether">
            <div class="keeptogether">
                <img class="splitimage" src="worldmap-0-0.jpeg" />
                <img class="splitimage" src="worldmap-0-1.jpeg" />
                <img class="splitimage" src="worldmap-0-2.jpeg" />
            </div>
            <br class="keeptogether">
            <div class="keeptogether">
                <img class="splitimage" src="worldmap-1-0.jpeg" />
                <img class="splitimage" src="worldmap-1-1.jpeg" />
                <img class="splitimage" src="worldmap-1-2.jpeg" />
            </div><br class="keeptogether">
            <div class="keeptogether">
                <img class="splitimage" src="worldmap-2-0.jpeg" />
                <img class="splitimage" src="worldmap-2-1.jpeg" />
                <img class="splitimage" src="worldmap-2-2.jpeg" />
            </div>
        </div>
    </body>
</html>

但是当浏览器窗口缩小时图像不会调整大小。
这是 fiddle :https://jsfiddle.net/ntL9c5jt/

最佳答案

添加宽度为 33.3%。到单元格 .splitimage

关于html - 使用 CSS 调整多个图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34416347/

相关文章:

javascript - 将弹出窗口对齐标签元素中文本区域的中心

jquery - 我想点击一个正方形来显示一条消息,显示每个正方形内的数字与 jquery

jquery - 近乎完美的 Jquery slider 的微小修改

javascript - 如何刷新 div 以从数据库获取新传入的数据

html - XSL/HTML 表格行数调整

html - Css:如何格式化和删除左右两侧表格的轮廓边框?

css - 使用 CSS 使 <h1> 垂直居中?

html - 如何使我的边距适合多种分辨率?

javascript - Slider FileReader JS 多图上传(递增索引)

html - 如何超链接 CSS 制作的图像?