如何將圖像放大效果添加到沒有固定大小的圖塊？

Question

我有流體網格：與width:33.3%一行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>