526互联

背景图片太大只显示一部分

发布时间 2023-03-29 11:21:44作者: Zyatoer

<div class="header-top">
      <div class="header-top-logo">
      </div>

.header .header-top .header-top-logo{
  width: 170px;
  height: 60px;
  background-image: url(../image/logo.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  /* float: left; */
}

原因：background-size中cover属性是将背景图片扩展至足够的大小如果图片过大其实是不能缩小的

contain也是同理：contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

解决方法：通过设置百分比的方式，把图片的大小改为盒子的大小即可

.header .header-top .header-top-logo{
  width: 170px;
  height: 60px;
  background-image: url(../image/logo.JPG);
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-size:100% 100%;
  /* float: left; */
}

image-20230329104448668

但这样处理图片比例会改变同时也会造成失真