Skalieren Sie das Bild in einem Responsive-Container

Question

Also ich entwickle ein mobiles freundliches Layout mit nur Quadrate und Rechtecke. Es hat Thumbnails mit Bildern und Bildunterschriften. Um das visuell dynamischer zu machen, wollte ich einen Hover-Effekt auf die Thumbnails anwenden.

Das Problem ist, dass die img Behälter ein sensibles Objekt ist, und wenn es skaliert ein Zoom-Effekt zu machen, es skaliert auch die img nur eine Möglichkeit, con Skala

Ist es Container es ist und nicht, dass es Container?

.tile{ 
 
    position: relative; 
 
    width: 50%; 
 
    float: left; 
 
\t background-size: 100%; 
 
\t 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 { 
 
\t transform: scale(1.5); 
 
}

<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>

Hilfe ist wirklich zu schätzen:

haben Dies ist der unerwünschte Effekt, den ich so weit gekommen!

Answer 1

Fügen Sie Ihrer Fliesenklasse overflow:hidden hinzu.