CSS制作响应式正方形及其应用

最新推荐文章于 2023-02-27 09:39:59 发布

Sevenwingsfish

最新推荐文章于 2023-02-27 09:39:59 发布

阅读量2.9k

点赞数 1

分类专栏：网页前端文章标签： css 响应式

本文链接：https://blog.csdn.net/u010571913/article/details/47084709

版权

本文介绍如何利用CSS制作响应式正方形，满足在不同设备上显示不变形的需求。通过设置宽度百分比并利用CSS的margin属性，避免使用JS，简化实现过程。关键代码中的margin-top: 100%巧妙地保证了元素的正方形形态。

摘要由CSDN通过智能技术生成

CSS制作响应式正方形？什么鬼？干嘛用的？干嘛用的没人有每人的需求，本人也正好是因为公司正在做的业务需要，想做个照片展示的功能（当然得符合响应式了）。而这个照片展示必须符合以下几点功能：1，用三张图片占满屏幕的一行；2，长宽比固定（暂时做成正方形）；3，保证图片不扭曲。

业务什么的这里暂时不谈，回到正题：利用CSS制作响应式正方形。响应式正方形，大部分第一想法肯定是设置宽度百分比，然后利用JS动态设置高度。性能什么的这里就不谈了，反正我是觉得比较麻烦，正如本人一直坚持的原则：CSS能实现的功能，为何要去麻烦JS？

废话不多说，先上个代码：

<div class='container'>
    <div class='content'>content</div>
</div>

接下来是CSS部分：

.container{
            width:100%;
            position:relative;
            display: inline-block;
        }
        .cont

关注

专栏目录