1.padding-top

<div class="pic-item">
  <div class='pic-con'>
    <img class="pic-img" src="https://bookcover.yuewen.com/qdbimg/349573/1015351739/180">
  </div>
</div>

.pic-item {
  width:30%;
}
.pic-con {
  position: relative;
  padding-top: 100%; /* 1:1 */
  overflow: hidden;
}
.pic-img {
  position: absolute;
  top: 0; left:0;
  width: 100%;
}

前端 & 小测
点亮星星文本打点-单行用户体验&实现文字垂直居中 CSS-宽高定比例展示【IE】CSS版本兼容&JS检测 ...
CSS-宽高定比例展示
1.padding-top jsbin在线预览
ImageView 宽高按相同的比例展示
1 父view高度设置wrap_content2 ImageView设置match_parent
iOS-twitter分享图片界面卡死的问题
图片宽高超过一定比例,界面卡死现在不知道具体多少,试验获得高/宽1.8点多可以,所以超出比例后进行处理即可
react-native 实现多图原比例展示切预览
按照客户想要的效果是图片是按比例、且按照顺序的排列，想要实现原比例展示就得到图片的宽高，而后端只有一条图片链接一开...
金三银四前端面试汇总
CSS div不定宽高，如何实现宽高比例1:1 div不定宽高，实现垂直居中 div不知道宽高且display:n...
css 图片以最长边显示
前言商品列表的展览区域，我们能看到很多商户上传的商品，但是商户上传商品的图片比例往往都是不定的，定死一个宽高展示...
微信小程序 wxss样式总结
图片宽高自适应 mode 属性：默认值：scaleToFill —- 不保持纵横比例缩放图片，使图片的宽高完全拉伸...
# 如何实现宽高定比例自适应 a certain aspect
重点：当margin/padding取形式为百分比的值时,以父元素的宽度作为参照物当left/top取形式为百...
CSS-flex常见面试题
废话不多说！ flex-内容宽度等分左右布局，一侧定宽，一侧自适应撑满未知高宽上下左右居中这个效果就不展示了...