如何在没有固定尺寸的情况下增加图像放大效果？

Question

我有流体网格：连续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>