Масштабирование и центрирование изображения при наведении курсора
Я разрабатываю руководства пользователя для своей компании, и мне нужно найти лучший способ просмотра изображений. У меня есть масштабирование при наведении, чтобы работать нормально, но это будет работать правильно, только если у пользователя есть большой экран компьютера при просмотре изображения. Поэтому я хочу центрировать изображение при наведении курсора.
Кроме того, было бы прекрасно, если бы изображение масштабировалось по отношению к размеру окна. У меня есть bootstrap, и jQuery связан.
Мой код на данный момент
.thumbnail {
transition: transform .5s, left .5s; /* Animation */
margin: 0 auto;
z-index: 2;
}
@media (min-width: 1600px) {
.thumbnail:hover {
transform: scale(1.75);
}}
@media (max-width: 1600px) {
.thumbnail:hover {
transform: scale(1.5);
position: relative;
left: 25%;
}} <img src = "http://via.placeholder.com/350x150" class = "thumbnail" style = "width:800px; height:auto">
Если бы я вообще не менял положение, изображение на мобильных телефонах увеличивалось бы и исчезало из окна.
Ответы 3
Используйте свойство object-fit для img
.thumbnail {
object-fit: cover;
}
Подгонка объекта - хорошее решение, я согласен, однако недостатком является то, что IE не поддерживает его и частично поддерживается на периферии. Это означает, что OP также должен подумать о том, как решить эту проблему. css-tricks.com/almanac/properties/o/object-fit
Проверьте q для получения обновленной информации. object-fit, вероятно, будет хорошо работать на сайте без боковой панели
Проблема в том, что при подгонке к объекту размер изображения изменяется в соответствии с его контейнером, но поскольку с правой стороны есть отдельный контейнер, он будет изменять размер, чтобы соответствовать контейнеру контента, а не самому сайту.
Если вы не связали bootstrap и jquery, пожалуйста, сначала свяжите их. В теге style замените текущий код этим. (Это тоже отзывчиво).
<style>
.zoom {
padding: 50px;
transition: transform .2s;
margin: 0 auto;
border :none;
}
.zoom:hover {
transform: scale(1.2);
}
</style>
И добавьте «масштабирование» к вашему классу в теге img.
<img src = "http://via.placeholder.com/350x150" class = "thumbnail zoom" style = "width:800px; height:auto">
Это почти то же самое, что я уже использую, но это не помогло изображению оставаться внутри окон ... Это отлично работает для масштабной части, но изображение все еще находится за пределами кадра.
Я использую chrome devTools для проверки отзывчивости. Он отлично работал в chrome devTools.
проверьте изображение, которое я связал в q. Это показывает, что это, вероятно, работает нормально, но из-за шаблона на сайте все сдвинуто немного влево.
.thumb-div {
overflow: hidden;
}
.thumb-div img {
-webkit-transition: ease all 0.3s;
-moz-transition: ease all 0.3s;
-o-transition: ease all 0.3s;
transition: ease all 0.3s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.thumb-div:hover img {
-webkit-transform: scale(1.1) rotate(0.1deg);
-moz-transform: scale(1.1) rotate(0.1deg);
-ms-transform: scale(1.1) rotate(0.1deg);
-o-transform: scale(1.1) rotate(0.1deg);
transform: scale(1.1) rotate(0.1deg);
}<div class = "thumb-div">
<img src = "http://via.placeholder.com/350x150" title = "" alt = "" />
</div>Пожалуйста, объясните, как это решает проблему с OP. Только почтового кода недостаточно.
Я изменил код. проверьте, теперь он работает правильно.
почему вы используете левый: 25%?