jquery - 具体背景封面问题( Accordion )

Question

我之前使用过 background-size:cover/contain 并认为我了解背景大小/样式的工作原理，但显然不是。我无法在下面的 fiddle 链接中获取 Accordion 的背景图像以进行合作。我只是想在不拉伸(stretch)的情况下将图像调整到 600px 宽度，我们将不胜感激任何帮助。 <3

http://jsfiddle.net/BMvt8/

.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。您需要的是将图像添加为 div 的背景图像，然后应用 background-size: cover。

请参阅此 fiddle :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 才能将图片标题放在狗的图片之上。