Переполнение CSS не работает с преобразованием

Question

У меня есть изображение, которое увеличивается при наведении курсора, но я хочу, чтобы он оставался в пределах первоначальной высоты и ширины. Я пробовал настройку переполнения: нет, но после преобразования он по-прежнему больше исходного.

<style type="text/css"> 
 
img.image { 
 
    -webkit-transition: all 1s ease; /* Safari and Chrome */ 
 
    -moz-transition: all 1s ease; /* Firefox */ 
 
    -ms-transition: all 1s ease; /* IE 9 */ 
 
    -o-transition: all 1s ease; /* Opera */ 
 
    transition: all 1s ease; 
 
    height:278; 
 
    width:185; 
 
    overflow:hidden; 
 
} 
 

 
img.image:hover { 
 
    -webkit-transform:scale(1.1); /* Safari and Chrome */ 
 
    -moz-transform:scale(1.1); /* Firefox */ 
 
    -ms-transform:scale(1.1); /* IE 9 */ 
 
    -o-transform:scale(1.1); /* Opera */ 
 
    transform:scale(1.1); 
 
    overflow:hidden; 
 
    height:278; 
 
    width:185; 
 
} 
 

 
</style> 
 

 
<img class="image" src="http://image.tmdb.org/t/p/w185/l2u1MDnR89ptsKZDxIF4LFTiBWP.jpg">

Answer 1

Вот working jsfiddle.

Если вы обертываете изображение в div с помощью свойства overflow:hidden, затем масштабируйте изображение внутри этого div, оно достигает результата, который вы ищете.

Как вы это делали, свойство overflow:hidden применялось к самому изображению. Когда вы увеличиваете масштаб изображения, вы просто увеличиваете изображение. Нет переполнения, чтобы скрыть. Ограничение изображения в пределах фиксированного размера div, а затем масштабирование изображения внутри скрывает переполнение div (края изображения)

Answer 2

используйте контейнер div для него и помещайте изображение внутри и с переполнением: скрыты;

демо here

<div class="img-xon"> 
<img class="image" src="http://image.tmdb.org/t/p/w185/l2u1MDnR89ptsKZDxIF4LFTiBWP.jpg" /> 
</div> 

.img-xon{ 
height:278; 
width:185; 
overflow:hidden; 
} 
img.image { 
-webkit-transition: all 1s ease; /* Safari and Chrome */ 
-moz-transition: all 1s ease; /* Firefox */ 
-ms-transition: all 1s ease; /* IE 9 */ 
-o-transition: all 1s ease; /* Opera */ 
transition: all 1s ease; 
height:278; 
width:185; 
} 

img.image:hover { 
overflow:hidden; 
height:278; 
width:185; 
} 

Answer 3

Посмотрите этот результат. link

Вы должны использовать блок для переполнения: скрытый