X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Изменение размера изображения относительно блока

Приклад
  • 2024-03-28
  • 43771 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

В данном уроке покажу как сделать, чтобы при адаптивной верстке, когда ширина блока меняется, изображение, которое располагается в нем, изменяло свои размеры относительно блока. У меня был урок - Как растянуть фон на всю ширину блока, схожий с этим, но там изменялся фон блока. Тут же способ для изображения вставленного с помощью тега IMG.

Масштабирование изображения

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



Пример

Данный эффект осуществлен с помощью простого CSS. Если просто подключить изображение, то оно может выходить за пределы блок и это не совсем то что нужно, особенно, если блок меняет свой размер, то есть на сайте используется адаптивная верстка.

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

Для примера, блок будет иметь ширину 75% относительно экрана, картинка в нем будет занимать всю ширину и менять свой размер вместе с блоком.

У блока будут стили:

.block{width:75%;}

Картинке же присвоим максимальную ширину в процентах и автоматическое определение высоты. Высоту обязательно иначе, при уменьшении ширины блока, картинка будет менять свою ширину но не высоту и будет неправильной формы. Готовые стили будут примерно такими.

.block img{
max-width:100%;
height:auto;
}

Как можете видеть, все очень просто. Если указать все параметры правильно, то результат тоже будет нужным. В свое время, я помучился, чтобы добиться такого эффекта.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 18, в среднем: 4.9 из 5
Читайте також