X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-01-18
  • 10643 просмотр

    2 комментарий

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

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

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

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

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



Пример

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

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

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

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

.block{width:75%;}

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

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

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

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

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 14, в среднем: 5 из 5
Читайте также
Опубликовано 2 комментария

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.