html代码
<div class='box'>
<img src="...">
</div>
CSS代码
父元素设置
.box {
position: relative;
width: 50%;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
或者
.box{
position: relative;
width: 50%;
height: 0;
padding-bottom: 50%;
}
图片.box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
效果图
213.jpg
html代码 CSS代码 效果图 参考：https://blog.csdn.net/jinwangxp/artic...
一、UIViewContentModeScaleAspectFit 按照"图片的宽高"比例缩放图片至图片的宽度或者...
处理响应式布局中背景图片的简单方法是等比例缩放背景图片。我们知道宽度设为百分比的 元素，其高度会随着宽度的变...
在使用UILabel显示富文本的时候（包含图片），有图片的情况下图片宽高不能自适应，图片宽高自适应方法如下： de...
1、css实现图片自适应宽高 主要使用padding-bottom，该属性是基于父元素宽度百分比的； 2、什么是B...
背景:background，把网页的背景设为图片 width 宽; height 高; background-c...
Android显示图片时，一般先根据屏幕的宽度、从服务器拿到图片的宽高尺寸，来计算图片加载url的宽w 和高h。图...
给图片宽度自适应auto，定高，高=视宽document.documentElement.clientWidth*...
详情中 有各种宽高的 图片 如何才能最优的显示 完美解决 如果 图片宽度 小于 屏幕宽度 不处理 高度自适应 ...
需求： 移动端图片宽高1:1显示.并且图片宽度要充满手机屏幕的宽度. 移动端banner 按比例显示 不固定高度 ...
本文标题：图片宽度设为百分比的情况下让图片宽高相等
本文链接：https://www.haomeiwen.com/subject/rjxoaqtx.html
网友评论