0

background-size:cover / contain 前に使用したことがありますが、背景のサイズ変更/スタイリングがどのように機能するかを理解していると思いましたが、明らかにそうではありませんでした。以下のフィドル リンクでアコーディオンの背景画像を取得するのに問題があります。画像を引き伸ばさずに 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;
}
4

2 に答える 2

0

次のように img 要素を div 要素に置き換えます。

<div style="backgrond-image:url('http://url.to/your/image.png')"></div>
于 2013-12-04T22:47:28.050 に答える
0

背景サイズはイメージ タグでは機能しません。たとえば、divで機能します。必要なのは、画像を div の background-image として追加してから、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 が必要です。

于 2013-12-04T22:47:49.140 に答える