Question

所以我正在开发一个只有正方形和矩形的移动友好布局。它有图片和标题的缩略图。为了使视觉更具视觉效果，我想在缩略图上进行悬停效果。

问题是，img容器是一个响应对象，当它缩放以实现放大效果时，它还会缩放它的容器

是否只能缩放img而不是它的容器？

这是我到目前为止所产生的不良影响：

＆＃13;

.tile{
    position:  relative;
    width: 50%;
    float: left;
	background-size: 100%;
	background-repeat: no-repeat;
    -webkit-transition: all .4s ease;
    transition: all .4s ease; 
}
.tile:after{
    content: "";
    display: block;
    padding-top: 100%;
}


.tile img {
    display: block;
    position: absolute;
    transition: all .4s ease;
}

.tile:hover img { 
	transform: scale(1.5);
}

＆＃13;

<div class="tile">
  <img src="http://p2.trrsf.com/image/fget/cf/600/600/images.terra.com/2013/10/16/2014-range-rover-evoque.jpg" />  
</div>

＆＃13;

非常感谢帮助！

Answer 1

将overflow:hidden添加到您的图块类。

在响应式容器内缩放图像

1 个答案: