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

Question

我之前使用过 background-size:cover / contains 并认为我了解背景大小/样式的工作原理，但显然不是。我无法在下面的小提琴链接中获取手风琴的背景图像以进行合作。我只是想在不拉伸的情况下将图像调整为 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 元素替换 img 元素：

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

Answer 2

背景大小不适用于图像标签。例如，它适用于 div。您需要将图像添加为 div 的背景图像，然后应用背景大小：封面。

看到这个小提琴：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 才能将图像标题放在狗的图像之上。