Html 使用CSS调整多个图像的大小_Html_Css

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

html css

Html 使用CSS调整多个图像的大小,html,css,Html,Css,我有一个大的图像分割成许多较小的图像。如果调整浏览器窗口的大小，我希望它们一起调整大小。到目前为止，我的代码是： <!DOCTYPE html> <body> <style> .splitimage{ max-height:100%; max-width:100%; width:auto; } .keeptogether{ w

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

<!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>


.分割图像{
最大高度：100%；
最大宽度：100%；
宽度：自动；
}
keeptogether先生{
宽度：100%；
溢出：隐藏；
空白：nowrap；
线高：0；
字距：-4px；
}

但当浏览器窗口缩小时，图像不会调整大小。

这里是小提琴：

增加宽度为33.3%。对于单元格

.splitimage

添加宽度为33.3%。对于单元格

.splitimage
将图像宽度设置为33.3333%，这样，它们将共同构成屏幕的100%

.splitimage{
最大高度：100%；
最大宽度：100%；
宽度：33.3333%；
/*因为一行中有3个图像*/
}
keeptogether先生{
宽度：100%；
溢出：隐藏；
空白：nowrap；
线高：0；
字距：-4px；
}





将图像宽度设置为33.3333%，这样，它们将共同构成屏幕的100%

.splitimage{
最大高度：100%；
最大宽度：100%；
宽度：33.3333%；
/*因为一行中有3个图像*/
}
keeptogether先生{
宽度：100%；
溢出：隐藏；
空白：nowrap；
线高：0；
字距：-4px；
}





当窗口缩小时，您的小提琴可以完美地调整图像的大小…？啊。这应该是一张完整的世界地图。。。？我有一种感觉，如果你把它们放在一张桌子上，这可能是可能的。否则我不确定。为什么不只是一张图片呢？事实上，图片正在重新调整大小。因为三个单元中的第一个单元占据了100%，所以u无法看到其余的2个图像。对于类.splitimage
添加宽度为33.3%。更好的是--calc（100%/3）
我建议只使用一个图像，而不是这9个分割的图像（页面加载时间、复杂的html等）。当窗口缩小时，你的小提琴可以完美地调整图像的大小…？啊。这应该是一张完整的世界地图。。。？我有一种感觉，如果你把它们放在一张桌子上，这可能是可能的。否则我不确定。为什么不只是一张图片呢？事实上，图片正在重新调整大小。因为三个单元中的第一个单元占据了100%，所以u无法看到其余的2个图像。对于类.splitimage
添加宽度为33.3%。更好的是--calc（100%/3）
我建议只使用一个图像，而不是这9个分割的图像（页面加载时间、复杂的html等）