Img не масштабируется при наведении
Добрый день, знатоки
У меня проблема с масштабированием изображения при наведении. Я проверил другую тему, и у меня ничего не работает. Из того, что я узнал из другого потока, это то, что масштабирование изображений не работает со встроенными элементами. Таким образом, я попытался включить display:inline-block в свой класс .banner-left-img и класс .left. Однако у меня это не получилось.
Я пробовал трансформировать с контрастом, фильтром и т. д. Нет проблем, но с масштабированием это становится проблемой.
Что я не понимаю?
.banner .left {
flex: 1;
height: 100%;
padding-right: 10%;
background: var(--primary2-color);
z-index: 2;
}
.banner .left .banner-left-img {
position: relative;
top: 50%;
left: -150%;
transform: translateY(-50%);
width: 145%;
animation: 0.75s ease-in forwards imgSlideFromLeft;
}
@keyframes imgSlideFromLeft {
100% {
top: 50%;
left: 7%;
transform: translateY(-50%);
}
}
.banner-left-img:hover {
transform: scale(1.5);
}<section class = "banner">
<div class = "left">
<img class = "banner-left-img" src = "/img/banner/banner.png" alt = "Mercedes AMG GT R Car Img">
<a href = "#"><img class = "social instagram" src = "/img/social-media/instagram.svg" alt = "Instagram icon"></a>
<a href = "https://thewikihow.com/video_csAXruiBLTs&ab_channel=Mercedes-Benz"><img class = "social youtube" src = "/img/social-media/youtube.svg" alt = "Youtube Icon"></a>
</div>
<div class = "right">
<div class = "content">
<h1>the all new 2020<br>mercedes amg GT R</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nisi tempor ipsum, mattis cursus
gravida aenean dolor. Fermentum pharetra et habitasse netus gravida nibh. Est velit elementum nisl,
tortor at elementum nulla. Egestas cras purus hendrerit aenean fermentum. </p>
<button type = "button">test drive now</button>
</div>
</div>
</section>@jqueryHtmlCSS хром.
Это должно помочь вам ответить на ваш собственный вопрос. stackoverflow.com/a/49411191/3825777 stackoverflow.com/a/58908175/3825777
Пожалуйста, опубликуйте ответ, а также попытайтесь удалить информацию, которая отвлекает других, которые могут захотеть решить ту же проблему для себя.
Господи, случайно удалил комментарий. Выкладываю сейчас! :) Еще раз спасибо
Ответы 2
Пытаться
width:100px;
height: auto;
ИЛИ
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
Я пробовал эту высоту: авто; ширина: авто; максимальная ширина: 135%; Это работает. Однако это не сработает, если я масштабирую его больше, чем исходная ширина img, которая составляет 145%, как указано в селекторе «.banner .left .banner-left-img».
Мне удалось поработать над своим преобразованием. Проблема заключалась в том, что селектор был неуместен при наведении.
Вместо .banner-left-img:hover { transform: scale(1.5); }
Должно быть .banner .left:hover .banner-left-img { transform: translateY(-50%) scale(1.05); }
Я хотел бы поблагодарить jQueryHtmlCSS за то, что поделился другим потоком, который помог мне решить мою проблему.
Какой браузер и ОС?