设置图片的宽高一样大

在移动设备上，我们常常需要将一张图片的宽度设为屏幕的宽度，同时将图片的高度设置成和图片的宽度一样大，下面讲讲用css如何设置。

html如下

        <div class="imageHeader"><img :src="food.image"></div>

css如下（这里用了styleus语法书写）

 .imageHeaderposition:relativewidth: 100%height:0padding-top:100%  /*相对于这个盒子的宽度设置的，其值=width*/imgposition:absolutetop:0left:0width: 100%height:100%

1、首先设置父容器.imageHeader的position:relative，width:100%，同时设置height:0，关键是padding-top:100%或者设置padding-bottom:100%这样设置的效果是.imageHeader这个盒子的padding-top/padding-bottom的值是等于.imageHeader这个盒子的宽度的，这样就把父元素的宽度和高度设置成一样大了

2、然后设置子元素<img>的position:absolute，top:0，left:0，width:100%，height:100%

经过上述操作，就可以在移动设备上将图片的长宽设置成一样了，并且宽度为移动设备的宽度，效果图如下所示：

设置图片的宽高一样大相关推荐

html设置图片的宽高
一.HTML标签内控制宽度高度 img标签自带的属性:width和height: 例如: <img src='图片地址' width:150; heght:150; /> 注意:通过 ...
微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
原生图片预览实现及由此引出的图片自适应宽高问题探索
看到手机相册,突发奇想:能不能用实现一个原生的页面"相册"?或者说,传统网页中怎么实现图片预览功能? 如果在原生网页中使用插件,那必不可少的要引入一堆东西(并不是鄙视插件,只是为了 ...
小程序图片自适应宽高，保持图片比例不变
小程序图片自适应宽高,保持图片比例不变小程序中,可根据需求给image设置 mode属性来控制图片的裁剪.缩放模式如果要保持图片在容器内不变形可设置mode属性为aspectFit 代码如下: / ...
linux 读取png图片大小,读取 png 图片的宽高信息
#include // 保留,在读取 png 头部信息的是,每次读取到 0D 0A 读取就会产生错误,如果 0D 0A 修改为其他的数据,则数据可以正常读取,不知道为什么 ----文件打开的时候, 将 ...
代码 - 多张图片合并成PDF（每页宽高即是当前页面图片的宽高）- itextpdf
文章目录 1. 多张图片转成PDF(每页PDF的宽高是当前页面图片的宽高) 7.2.3版本官方示例多图合并成PDF 1. 多张图片转成PDF(每页PDF的宽高是当前页面图片的宽高) 7.2.3 ...
RT/Metro商店应用如何如何获取图片的宽高
RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

设置图片的宽高一样大

设置图片的宽高一样大相关推荐

最新文章

热门文章