Question

我使用过背景尺寸：封面/包含之前我认为我理解背景尺寸/样式是如何工作的，但显然不是。我无法在下面的小提琴链接中获得手风琴的背景图像以进行合作。我只是想要将图像适合600px宽度而不拉伸，任何帮助都将非常感激。＆lt; 3

.accordian li:first-child {
   width:600px;
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/

.accordian ul li:hover {
  width: 600px;
  height: 320px;
  background-size:cover;
  }

.accordian li img {
    display: block;
    width:600px;
    height:320px;
    background-size:cover;
}

Answer 1

以这种方式用div元素替换img元素：

<div style="backgrond-image:url('http://url.to/your/image.png')"></div>

Answer 2

背景大小不适用于图像标记。它适用于例如div。你需要的是将图像添加为div的背景图像，然后应用background-size：cover。

看到这个小提琴：http://jsfiddle.net/BMvt8/2/

我已经使用类图像创建了一个div，并使用它而不是img标记：

<div class="image" style="background-image: url(http://i.imgur.com/iZcbLKf.jpg); background-size: cover"/>

并添加到css：

.image {
    height: 320px;
    width: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.image_title {
    z-index: 3;
}

需要z-index才能将图像标题放在狗的图像上。

特定背景封面问题（手风琴）

2 个答案: