CSS/JS 图片高度固定宽度按比例显示 （纯CSS方法和CSS+JS方法）

Posted 2021-06-07 JIZQAQ

目录

一、CSS+JS方法

介绍

思路

样例代码

二、纯CSS

思路

样例代码

---

一、CSS+JS方法

介绍

我这边用的是Vue+Vant，在手机端显示一张图片，高度固定为屏幕的60%，宽度按照比例缩放，超出屏幕宽度部分不显示。

思路

css中吧高度和其他样式都写好，通过js计算应该设置的宽度。我们获得到屏幕的高度*60%，在查看原图长宽比按照比例获得宽度的像素。

样例代码

<van-image
      class="login_pic"
      :style="getWidth()"
      :src="require('../../assets/hands.jpg')"
/>

.login_pic{
  left:0px;
  top:0px;
  height:60%;
  overflow:hidden;
  position:fixed;
  z-index: 9;
}

getWidth(){
      let height = window.screen.height * 0.6 //获得屏幕高度的60%
      let width = 2880 * height / 1670 //原图尺寸为2880*1670，这里是按比例获得对应的宽度像素
      return { "width": width + 'px' };
},

二、纯CSS

和上面实现同样的功能

思路

在这里，图片是作为div的background image使用的，使用了background-image的一些特性完成了这个功能。

样例代码

<div class="login_pic2"></div>

.login_pic2 {
  position: absolute;
  top: 0;
  left: 0;
  overflow:hidden;
  width: 100%;
  height: 60%;
  background-image: url(../../assets/hands.jpg);
  background-repeat: no-repeat;
  -moz-background-size:100% 100%; 
  background-size:100% 100%;
  background-size: cover;
}