Увеличьте изображение, когда наведите указатель мыши

Question

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

<div class="container"> 
    <img src="image.jpg" alt="" height="400" width="500"/> 
</div> 

Мой стиль CSS

.container{ 
    height: 400px; 
    width: 500px; 
    border: 2px solid red; 
} 
.container:hover img{ 
    height: 500px; 
    width: 600px; 
} 

FIDDLE

Answer 1

пытаются добавить overflow: hidden к DIV поэтому содержание будет обрезана, а остальная часть контента будет невидим

.container{ 
    height: 400px; 
    width: 500px; 
    border: 2px solid red; 
    overflow: hidden 
} 
.container:hover img{ 
    height: 500px; 
    width: 600px; 
} 

Answer 2

что-то вроде этого JS Fiddle?

.container { 
 
    height: 400px; 
 
    width: 500px; 
 
    border: 2px solid red; 
 
    overflow: hidden 
 
} 
 
.container img {  /* add this rule */ 
 
    width:100%;; 
 
    height:100%; 
 
    transition:all 0.7s ease-in-out; 
 
} 
 
.container:hover img { /* change this rule */ 
 
    width:120%; 
 
    height:120%; 
 
    margin:-10% 0 0 -10%; 
 
    transition:all 0.7s ease-in-out; 
 
}

<div class="container"> 
 
    <img src="http://motivationhacks.org/wp-content/uploads/2015/07/steve-jobs-black-white.jpg" alt="" height="400" width="500" /> 
 
</div>

Answer 3

Одним из наиболее эффективного метода будет использовать scale перехода CSS свойство так,

.container{ 
    height: 400px; 
    width: 500px; 
    border: 2px solid red; 
    overflow: hidden; 
} 

.container:hover img{ 
    transform: scale(1.25); 
} 

Используя свойство масштаба, изображение будет увеличить гладко на все устройств, включая мобильные устройства. Поэтому вам не нужно указывать точные значения высоты и ширины для каждого устройства.

Надеется, что это помогает :)