css 宽度为百分比，高度和宽度相等的设置

工作中有一个需求，一行四个图片（正方形的图片），但是我们又要让图片自适应，不能使用 px 来设置宽度，要使用百分比，比如上面一行四个图片，图片的宽度，我们设置了25%，高度呢，也设置25%吗，这肯定是不正确的，高度怎么控制就成了难题

像这样的，我使用的 flex 布局，图片的宽度是 23% 加上间隙就有 25%了

下同看一下解决办法

     <view class="hf-wrapper"><view class="img"><image mode="aspectFill" src="/images/candel/aaaaaa.jpg"></image></view><view class="img"><image mode="aspectFill" src="/images/candel/aaaaaa.jpg"></image></view><view class="img"><image mode="aspectFill" src="/images/candel/aaaaaa.jpg"></image></view><view class="img"><image mode="aspectFill" src="/images/candel/aaaaaa.jpg"></image></view></view>

.card .hf-wrapper{display:flex;flex-flow: row wrap;justify-content: flex-start;align-items: center;
}.card .hf-wrapper .img{position:relative;width:23%;height:0;padding-top:23%;margin-right:12rpx;
}.card .hf-wrapper .img image{width:100%;height:100%;top:0;left:0;position: absolute;}

在图片的外面添加了一个 view 设置了 width:23% height:0 padding-top:23%;
在CSS中，padding-top和padding-bottom这两个属性的百分号是根据元素的宽度计算的（这就是要点）

css 宽度为百分比，高度和宽度相等的设置相关推荐

css 实现image宽度百分百，高度跟宽度一样大小
前言:第一次写博客(不知道从何说起),希望以后再接再励.之前也遇到很多问题,有总结过,但是没有写出来(改天继续贴出其他总结),今天遇见css 实现image宽度百分百,高度跟宽度一样大小这个问题.贴出 ...
CSS之设置图片宽度100%，高度等于宽度
html代码如下: <div class="left"><div class="img"><img src='static/img ...
css display table 自适应高度、宽度问题
display: table; 外层定义宽高,里面内容自适应宽高.如果子元素是div,每列宽度不是等分.所以建议子元素用li 标签 .css-table {display: table;height: ...
android 高度百分比,如何在Android中进行百分比高度和宽度？
现在,可以用Guidelines定位百分比值 xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ap ...
获取屏幕宽度、浏览器宽度、网页高度，宽度信息
视图模式innerWidth/innerHeight属性(窗口大小) window.innerHeight window.innerWidth window.pageYOffset:Netscape ...
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
word如何设置长宽高_word页面高度和宽度怎么设置
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. word设置宽度高度的方法: 1.首先打开一篇文档,在功能区选择"页面布局". 2.在页面布局的页面设置功能区 ...
word怎么设置页面宽度和页面高度
问题:有时候复制操作,会出现两页的宽度不一致. 首先打开一篇文档,在功能区选择"布局". 在布局的页面设置功能区,点击页面设置右下角的小按钮打开详细设置.页面设置里面有设置纸张大小 ...
div 自定义拉宽_纯Css实现Div高度根据自适应宽度（百分比）调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
css里dom宽度,2019-08-23 DOM中各种高度、宽度
1.引言对常见CSS x,y属性有大概了解,实际运用过程中发现很多概念模糊不清,对其进行学习. 2.常见x,y属性概念 1. e.clientX 是目标点距离浏览器可视范围的X轴坐标 2. e.pa ...

css 宽度为百分比，高度和宽度相等的设置

在图片的外面添加了一个 view 设置了 width:23% height:0 padding-top:23%;
在CSS中，padding-top和padding-bottom这两个属性的百分号是根据元素的宽度计算的（这就是要点）

css 宽度为百分比，高度和宽度相等的设置相关推荐

最新文章

热门文章

css 宽度为百分比， 高度和宽度相等的设置

在图片的外面添加了一个 view 设置了 width:23% height:0 padding-top:23%; 在CSS中，padding-top和padding-bottom这两个属性的百分号是根据元素的宽度计算的（这就是要点）

css 宽度为百分比， 高度和宽度相等的设置相关推荐

最新文章

热门文章

css 宽度为百分比，高度和宽度相等的设置

在图片的外面添加了一个 view 设置了 width:23% height:0 padding-top:23%;
在CSS中，padding-top和padding-bottom这两个属性的百分号是根据元素的宽度计算的（这就是要点）

css 宽度为百分比，高度和宽度相等的设置相关推荐