Question

我有一个无序列表，即每行一定的大小，每行都有背景，我希望背景调整大小并完美贴合（按比例缩小）以适应盒子的宽度，我试过了无法让它工作，我已经在这个JSFiddle -

中制作了我所拥有的简化版本

HTML

<ul>
  <li style='border: 1px solid black; background: url(http://i67.tinypic.com/xlcq5w.jpg)'>
    <span style="background-color: #000000">
      Marvel's Avengers Assemble - S3E1 </br>
      Adapting to Change
    </span>
  </li>
</ul>

CSS

li{
  list-style:none;
  color: white  ;
  padding-left: 0pt;
  margin-top:0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 60px;
  width: 270px;
}   

ul {
  padding-left: 0px;
  padding-top: 0px;
}

希望有人可以将图像放大到我的框中。

Answer 1

您的问题是您在CSS中设置background-size: cover但是通过内联样式设置background。 background是一个简写属性，包括以下内容：

background-size
background-color
background-image
background-position
background-repeat
background-attachment

将值设置为background属性时，URL将应用于background-image，其他属性将设置为其初始值。以下是spec所说的内容：

给定一个有效的声明，对于每一层，速记首先设置每个'background-image'，'background-position'，'background-size'，'background-repeat'，'background-origin'的相应图层，'background-clip'和'background-attachment' 到该属性的初始值 ，然后在声明中指定为此图层指定的任何显式值。最后，'background-color'设置为指定的颜色（如果有），否则设置为其初始值。

这可以防止您的background-size（通过CSS设置）产生任何影响。您应该使用内联样式直接设置background-image（或）再次设置background-size。

＆＃13;

li {
  list-style: none;
  color: white;
  padding-left: 0pt;
  margin-top: 0px;
  background-size: cover;
  height: 60px;
  width: 270px;
}
ul {
  padding-left: 0px;
  padding-top: 0px;
}

＆＃13;

<ul>
  <li style='border: 1px solid black; background: url(http://i67.tinypic.com/xlcq5w.jpg); background-size: cover;'>
    <span style="background-color: #000000"> Marvel's Avengers Assemble - S3E1 <br> Adapting to Change</span>
  </li>
  <li style='border: 1px solid black; background-image: url(http://i67.tinypic.com/xlcq5w.jpg);'>
    <span style="background-color: #000000"> Marvel's Avengers Assemble - S3E1 <br> Adapting to Change</span>
  </li>
  <li style='border: 1px solid black; background-image: url(http://i67.tinypic.com/xlcq5w.jpg); background-size: 100% 100%'>
    <span style="background-color: #000000"> Marvel's Avengers Assemble - S3E1 <br> Adapting to Change</span>
  </li>
</ul>

＆＃13;

注意：您可能还需要考虑更改background-size值。 cover选项可在保持纵横比的同时缩放图像。因此，如果图像的纵横比与li的纵横比不同，则图像将在右侧和/或底部被裁剪。如果您想避免裁剪，可以使用100% 100%作为值（就像上面代码段中的第3个li一样）。

Answer 2

为什么不使用img元素来显示li中的图像，而不是尝试将图像设置为背景。然后将文本和img设置为GridLayoutManager并将li设置为position:absolute;。您还需要将文本和img设置为position:relative;。

top:0px;

li{
  list-style:none;
  color: white	;
  padding-left: 0pt;
  margin-top:0px;
  position:relative;
  }	
  li img{
    position:absolute;
    top:0px;
  }
  li span{
    position:absolute;
    top:0px;
  }

ul {
  padding-left: 0px;
  padding-top: 0px;
}

调整无序列表中的背景图像（li）

2 个答案: