HTML CSS 将未知长宽的图片以正方形显示(自适应)
1. 先创建一个正方形的容器,由于要实现自适应,不能直接给固定长宽,需要将宽度设置100%,padding-bottom: 100% ,这样就可以实现一个自适应的正方形的容器。在实际的项目中,很多时候图片需要以正方形(1:1)显示,但往往不是所有的图片来源都是1:1的比例,这时候需要将图片按比例裁剪缩放将居中显示。2. 通过CSS 样式将图片按比例裁剪缩放并居中显示在刚刚创建的正方形容器中。
原创
2023-12-02 16:15:24 ·
1500 阅读 ·
0 评论