我有一个大图像拆分成许多小图像。如果调整浏览器窗口的大小,我希望它们一起调整大小。到目前为止我的代码是:
<!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/