Зум нарушает пропорции...

Роман Н

 - See more at: [URL='https://lumtu.com/yti/dAHHAdWZodHRwOi8vY29yZWxhbmdzLmNvbS9jc3MvYm94L3pvb20uaHRtbCNzdGhhc2gucFhESW9DaG8uZ8Ga']http://www.corelangs.com/css/box/zoom.html#sthash.pXDIoCho.dpuf[/URL]

Code (markup):

 <!DOCTYPE html> <html > <head> <style type="text/css"> .frame { height: 200px; width: 200px; overflow: hidden; } .zoomin img { height: 200px; width: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomin img:hover { width: 300px; height: 300px; } </style> </head> <body> <div class="zoomin frame"> <img src="img/zimage.png" title="Масштабирование при наведении с помощью перехода с помощью CSS" /> </div> </body> </html>

Код (разметка): Привет, мне нужна помощь с этим... кажется, что масштаб не пропорционален! почему? может кто-нибудь мне помочь.!

Wedma

Потому что вы установили изображение как по ширине, так и по высоте. Если вы хотите, чтобы оно было пропорциональным, вам нужно отпустить его; либо его ширина, либо высота. Пример:

 .zoomin img{

width: 100%; /*relatively to parent .frame*/

height: auto; /*allow it to adjust by itself*/

transition: all 2s ease;
}

Код (CSS):

Похожие темы	Дата
Обложка для журнала	19.10.2024, 18:10
Как создать новые страницы 1...2...3 и т.д., чтобы в меню их не было видно	19.10.2024, 18:10
Создание веб-сайта интернет-магазинов (например, Amazon), школьный проект	19.10.2024, 18:10
Привет, блоггеры! Как у вас сейчас ситуация с монетизацией?	19.10.2024, 18:10
Есть какой-либо способ сделать это?	19.10.2024, 18:10
Пользовательская целевая страница/страница сжатия и пользовательское имя поддомена премиум-класса	19.10.2024, 18:10
Пожалуйста, помогите мне решить проблему с моей домашней страницей.	19.10.2024, 18:10
Обновление Wordpress 4.9.1 вызвало ошибку сервера 500	19.10.2024, 18:10
создать циферблат с помощью CSS	19.10.2024, 18:10
Есть идеи, как сохранить этот текст статическим	19.10.2024, 18:10

Зум нарушает пропорции...

Роман Н

Wedma

I AM

Интересно