如何制作响应式马赛克 css 全屏宽度

Question

你好，我在制作这个响应式马赛克时遇到了麻烦，我在这里想要完成的是保持 7 张图像的顺序相同，如果屏幕较小，则使马赛克全宽，但它们各自的比例在移动屏幕但保持秩序。

这是我的 css:

#mosaic {
              width: 100%;
              background-color: aqua;
            }
            .largeImg, .smallImg {
              /*display: inline-block;*/
              float: left;
            }
            .largeImg {
              /*width: 40%;*/
              background-color: #165384;
            }
            .smallImg {
              /*width: 60%;*/
              background-color: #EF0808;
            }

            .col-wrap {
              display: inline-block;
            }

这是我的演示：jsfiddle demo

希望有人能提供帮助，感谢阅读。

Answer 1

您可以使用media queries实现您想要的功能，下面的代码是针对移动设备的，试试吧；

@media all and (max-width: 658px) { // mobile devices
    #mosaic { 
        display:block; // to have each musaic in one line
    }
}

如何制作响应式马赛克 css 全屏宽度

How to make a responsive mosaic css fullscreen width

html

css

image-scaling

responsive-design