css已知图片宽度，如何让宽高相等

实际效果

需求

已知父元素（box）为一个正方形
但不知道父元素实际尺寸（自适应）
现在需要往正方形里面放4张图片，且图片相互之间有留白

实现方式

先看dom结构：

<body><div class="box"><div class="sub sub1"></div><div class="sub sub2"></div><div class="sub sub3"></div><div class="sub sub4"></div></div>
</body>

父元素基本样式：

* {margin: 0;padding: 0;
}
html,
body {height: 100%;
}
body {display: flex;justify-content: center;align-items: center;
}
.box {width: 30%;background: #e5e5e5;
}

子元素实现样式：

.sub {width: 48%;height: 0;padding-bottom: 48%;background-image: url("./img/image1.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;float: left;margin-right: 2%;margin-bottom: 2%;
}.sub:nth-of-type(2) {background-image: url("./img/image2.jpg");margin-left: 2%;margin-right: 0;
}.sub:nth-of-type(4) {background-image: url("./img/image4.jpg");margin: 2% 0 0 2%;
}.sub:nth-of-type(3) {clear: both;background-image: url("./img/image3.jpg");margin-bottom: 0;margin-top: 2%;
}

例子相关图片

总结

padding结合height: 0;是实现此功能的关键
本来开始是使用css的object-fit属性配合<img>标签实现图片的自适应展示
后因为object-fit不能兼容ie，且必须指定高度，遂使用背景图方式实现
工作中经常会遇到由于是自适应屏幕导致我们不能写固定宽高，这个时候就需要通过类似方式来获取合适的宽高
仅当个人笔记使用，如果有更好的方法回应留言区讨论，一起学习

完整代码

最后附完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}body {display: flex;justify-content: center;align-items: center;}.box {width: 30%;background: #e5e5e5;}.sub {width: 48%;height: 0;padding-bottom: 48%;background-image: url("./img/image1.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;float: left;margin-right: 2%;margin-bottom: 2%;}.sub:nth-of-type(2) {background-image: url("./img/image2.jpg");margin-left: 2%;margin-right: 0;}.sub:nth-of-type(4) {background-image: url("./img/image4.jpg");margin: 2% 0 0 2%;}.sub:nth-of-type(3) {clear: both;background-image: url("./img/image3.jpg");margin-bottom: 0;margin-top: 2%;}</style></head><body><div class="box"><div class="sub sub1"></div><div class="sub sub2"></div><div class="sub sub3"></div><div class="sub sub4"></div></div></body>
</html>

css已知图片宽度，如何让宽高相等相关推荐

[css] 怎么使图片宽度自适应呢？
[css] 怎么使图片宽度自适应呢? 百分比 vw padding:百分比个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端 ...
Java基础练习题已知长方体的长、宽、高分别是a、b、c，求其表面积和体积。
目录 1.代码思路 2.代码实现过程 2.1.获取用户输入 2.2.计算结果并输出 3.完整代码 1.代码思路先通过用户键盘输入获取三个数,分别为长.宽.高,然后通过长方体表面积和体积计算公式进行计 ...
Excel单元格插入图片，并自适应宽高——保姆级教程
Excel单元格插入图片,并自适应宽高--保姆级教程 author:陈镇坤27 日期:2022年3月22日创作不易,转载请注明来源摘要:计算图片高宽像素,将Excel单元格高宽单位转化为以像素为单 ...
Java BufferImage图片处理（获取宽高、图片截取、转换灰度图）
Java BufferImage图片处理(获取宽高.截取.转换灰度图) 1. 效果图 2. 源码参考这篇博客将介绍如何使用Java读取图片为byte[]数组,或者BufferedImage及互相转 ...
html 图片保持长宽比,实现图片在页面中宽高一直保持16：9比例的方法
实现图片在页面中宽高一直保持16:9比例的方法发布时间:2020-08-31 14:25:10 来源:亿速云阅读:133 作者:小新小编给大家分享一下实现图片在页面中宽高一直保持16:9比例的方 ...
图片圆角边框自适应宽高（深夜原创）
最近挺忙,没来得及更新博客!夜深了,给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法.请先看如下代码: <!DOCTYPE html> <head> <me ...
CSS 垂直居中、水平居中及流失布局宽高自适应
CSS 垂直居中.水平居中及流失布局宽高自适应,在工作中,经常遇到某个元素如何居中,因此介绍一种简单的居中方式.同时,也经常遇到,上到下布局,当顶部动态变化时,及高度不固定,但是底部如何动态铺满父元素 ...
java生成缩略图，接收图片，按指定宽高或按比例生成缩略图
全栈工程师开发手册 (作者:栾鹏) java教程全解 java生成缩略图,接收图片,按指定宽高或按比例生成缩略图,能有效降低前端访问图片的流量负载. 支持的图片类型 : [BMP, bmp, jpg, ...
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...

css已知图片宽度，如何让宽高相等

实际效果

需求

实现方式

例子相关图片

总结

完整代码

css已知图片宽度，如何让宽高相等相关推荐

最新文章

热门文章