Доброго времени суток. 🙂
В данном уроке покажу как сделать, чтобы при адаптивной верстке, когда ширина блока меняется, изображение, которое располагается в нем, изменяло свои размеры относительно блока. У меня был урок - Как растянуть фон на всю ширину блока, схожий с этим, но там изменялся фон блока. Тут же способ для изображения вставленного с помощью тега IMG.
Пример адаптивного масштабирования изображения относительно родительского блока, можете посмотреть в примере. Чтобы увидеть изменение изображения, просто измените размер окна, вашего браузера.
Данный эффект осуществлен с помощью простого CSS. Если просто подключить изображение, то оно может выходить за пределы блок и это не совсем то что нужно, особенно, если блок меняет свой размер, то есть на сайте используется адаптивная верстка.
Блок внутри которого будет вставлена картинка, может иметь фиксированную ширину в пикселях или изменятся, относительно размера окна браузера. Картинка может иметь разные размеры, но для того, чтобы выглядело правильно, ей нужно добавить стилей. Перед этим можно присвоить ей класс, или задать стили сразу для Всех картинок одновременно.
Для примера, блок будет иметь ширину 75% относительно экрана, картинка в нем будет занимать всю ширину и менять свой размер вместе с блоком.
У блока будут стили:
.block{width:75%;}
Картинке же присвоим максимальную ширину в процентах и автоматическое определение высоты. Высоту обязательно иначе, при уменьшении ширины блока, картинка будет менять свою ширину но не высоту и будет неправильной формы. Готовые стили будут примерно такими.
.block img{
max-width:100%;
height:auto;
}
Как можете видеть, все очень просто. Если указать все параметры правильно, то результат тоже будет нужным. В свое время, я помучился, чтобы добиться такого эффекта.
На этом все, спасибо за внимание. 🙂