前端HTML+CSS图片显示不全问题


在前端展示图片时,固定150px*150px容器中,经常出现图片展示不全问题

解决:使用css加背景图片

            <a class="card showimage" :style="{'background-image':'url('+bg.png+')'}"
               v-for="(item, index) in pictureList" :key="index"
               @click="selectImgItem(item)">
            </a>

主要CSS

.showimage {
  width: 150px;
  height: 150px;
  float: left;
  margin: 5px;
  overflow: hidden;
  border: 1px solid #dedede;
  padding: 5px;
  // 图片显示不全问题解决
  background-repeat: no-repeat;
  filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
  -moz-background-size:88% 88%;
  background-size:88% 88%;
  background-position: center center;
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM