サイズを固定しないでブロックに画像を拡大する方法は？

Question

私は流体グリッドを持っています：1行に3ブロック、width:33.3%で。このブロックに含まれる画像にはwidth: 100%とheight: autoがあります。この画像のホバーにズームイン効果を追加したいと思います。しかし、私は流体グリッドでそれを行う方法やブロックの高さを変更することなくアイディアを持っていません。以下に私のコードスニペットを見ることができます。

どのようにそれを解決するためのアイデアですか？

.split.third { 
 
    width: 33.3%; 
 
    display: block; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
.split.third img { 
 
    width: 100%; 
 
    height: auto; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.split.third:hover img { 
 
    width: 120%; 
 
}

<div class="split-wrap"> 
 
    <div class="split third"> 
 
    <div class="cover"> 
 
     <img src="http://cs5-3.4pda.to/5290239.png" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="split third"> 
 
    <div class="cover"> 
 
     <img src="http://cs5-3.4pda.to/5290239.png" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="split third"> 
 
    <div class="cover"> 
 
     <img src="http://cs5-3.4pda.to/5290239.png" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

使用transform: scale(1.2)。

.split.third { 
 
    width: 33.3%; 
 
    display: block; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
.split.third img { 
 
    width: 100%; 
 
    height: auto; 
 
    -webkit-transition: -webkit-transform 1s ease; 
 
      transition: -webkit-transform 1s ease; 
 
      transition: transform 1s ease; 
 
      transition: transform 1s ease, -webkit-transform 1s ease; 
 
} 
 
.split.third:hover img { 
 
    -webkit-transform: scale(1.2); 
 
      transform: scale(1.2); 
 
}

<div class="split-wrap"> 
 
    <div class="split third"> 
 
    <div class="cover"> 
 
     <img src="http://cs5-3.4pda.to/5290239.png"> 
 
    </div> 
 
    </div> 
 
    <div class="split third"> 
 
    <div class="cover"> 
 
     <img src="http://cs5-3.4pda.to/5290239.png"> 
 
    </div> 
 
    </div> 
 
    <div class="split third"> 
 
    <div class="cover"> 
 
     <img src="http://cs5-3.4pda.to/5290239.png"> 
 
    </div> 
 
    </div> 
 
</div>