使用CSS定义一个和屏幕宽度一样正方形容器

2024-05-19 02:41:33

使用CSS定义一个和屏幕宽度一样正方形容器

介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器。

问题

有时候，我们在移动端需要做一个商品展示页面，一打开页面，屏幕的上面一半展示为商品的图片，下面才是商品的文字信息介绍，那么我们要怎么实现在图片加载之前预留一个正方形区域给图片，防止一开始因为没有图片导致文字往上跑然后等图片加载出来后浏览器再对界面重排这一不优雅的情况发生，怎么设置图片的宽高使其宽高刚好等于屏幕的宽度呢。

解决方案

//html
<div class="square"><img class="img" src="img/drinks.jpg"/>
</div>//css
.square{position: relative;width: 100%;padding-top: 100%;height: 0;
}
.img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}

其实很简单，我们只需要设置包裹图片的父元素（同时也是 body 的子元素，也就是这里类名为 square 的 div ）其宽度为100% 还有 padding-top 为100% ，这样，在图片加载之前相对于区域就有一个和屏幕宽度一样的正方形容器。
查看css手册我们可以知道，当我们给 padding 赋值为百分比的时候，其数值时基于父元素的宽度的百分比的内边距，而这里的父元素宽度为100%即屏幕的宽度，所以其我们就可以获得一个和屏幕宽度一样的正方形容器。
然后我们再对图片标签进行定位和设置其宽度和高度都为100%，其数值为基于包含它的块级对象的百分比宽度和高度，也就是之前预留出来的正方形区域。

使用CSS定义一个和屏幕宽度一样正方形容器相关推荐

Css实现自适应屏幕宽度的正方形
思路,正方形,长宽都一样,需要找到一个标准值然后再去设置盒子模型,可以用padding,margin, width/height, 正题开始 1. 使用padding,原因,百分比是基于父元素的宽度, ...
web开发入门，css背景图片自适应屏幕宽度
现如今,我们经常可以看到很多互联网员工都在抱怨,不是说收入低了,就是说工作时间太长.所以我们会见到有不少优秀的互联网员工,只要有机会,要么去一些学校当老师,要么当公务员之类比较稳定的岗位,当然这些能够 ...
css笔记：用css定义一个无边框的按钮
测试代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
信不信由你！iPhone6屏幕宽度不一定是375px，iPhone6 Plus屏幕宽度不一定是414px
看到这个题目你可能不信,引出这个问题的缘由是几次项目中Chrome模拟器和iPhone6真机预览效果不一致. 为什么在Chrome Emulation模拟手机页面和真机预览效果不一致? 以前觉得不外乎 ...
如何让网页自适应屏幕宽度
网页自适应屏幕宽度到底是怎么做到的? 1.首先,在网页代码的头部,加入一行viewport元标签: viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width= ...
CSS定义如何计算一个元素的总宽度和总高度
box-sizing CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度. 在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
css网页屏幕自适应,css自适应宽度如何让网页自适应所有屏幕宽度
如何设置一个div的宽度为自适应宽度?div里只有文字.感情的戏,小编没演技.这场戏女主角是你而小编只是戏里的一个傻逼. #choise ul li a { display:block; border ...
css --- 使用媒体查询当屏幕宽度小于某个值时,隐藏掉某个类
Bootstrap提供了一个封装好的类: .hidden-xs: 当屏幕宽度<768px时隐藏 .hidden-sm: 当屏幕768px <= 宽度<992px时隐藏 .hidden ...

最新文章

热门文章