Как сделать так чтобы блок уменьшался пропорционально
Обновлено: 05.07.2024
Такое форматирование позволяет предотвратить превышение любым из имеющихся на странице img элементов ширины его контейнера. И в ситуации, когда контейнер становится ýже содержащегося в нем изображения, элемент изображение пропорционально уменьшает свою ширину, для того, чтобы быть в рамках контейнера. Все очень просто, не правда ли, однако, есть нюансы.
Если в разметке у элемента изображения имеются контентные атрибуты размерностей ( width и height ) и вы, используя приведенный выше способ, средствами CSS переопределяете его ширину, высота изображения останется прежней, поскольку ее значение определяется с помощью контентного атрибута элемента. А это, естественно, приведет к искажению изображения.
Простейший способ предотвращения подобной проблемы заключается в исключении атрибутов width и height из разметки элемента. Однако, именно такой способ определения размеров изображения, с помощью контентных атрибутов, наиболее предпочтителен с точки зрения производительности ресурса, поскольку это позволяет снизить время, требуемое браузеру для отображения изображения. Более детально данный вопрос раскрывается в рекомендациях Google по определению размеров изображения. Каких либо жестких рекомендаций по размещению этих данных нет, они могут содержаться в HTML разметке и/или определяться с помощью CSS кода. Я, все же, склоняюсь к мнению, что как с практической, так и с логической точки зрения, необходимо использовать HTML атрибуты.
Итак, мы хотим указывать требуемые размеры наших изображений и в тоже время получить возможность их пропорционального масштабирования. К счастью, такой способ есть, более того, он невероятно прост — необходимо добавить CSS декларацию, переопределяющую явно указанное значение высоты контентным атрибутом в HTML . То есть совместно с max-width нужно использовать height:auto :
Теперь масштабирование изображений будет происходить без искажений. Наглядный пример пропорционального масштабирования содержащих атрибуты размерностей изображений можно увидеть на этой демо-странице.
Поддержка браузерами.
Даже в нашем, казалось бы простейшем случае, существует пару различий в реализации некоторыми браузерами, на которые необходимо обратить внимание, по крайней мере, если вы заинтересованы в предоставлении гибко изменяющейся по ширине компоновки в IE8 и ниже.
IE7 , кстати, выполняет пропорциональное масштабирование изображения независимо от того, указаны ли атрибуты размерностей в разметке и даже в том случае, если вы не используете декларацию height:auto .
Что касается IE8 , то для корректного масштабирования изображений, вам, как ни странно, потребуется помимо переопределения установленной в разметке высоты, переопределить и значение ширины. К великой радости, наличие дополнительной декларации width:auto не вызывает никаких проблем в других браузерах. Итак, для пропорционального масштабирования изображений в IE8 вам необходимо использовать следующее правило:
Узнайте, как сохранить пропорции элемента с помощью CSS.
Пропорции
Создание гибких элементов, которые держат их пропорции (4:3, 16:9 и т.д.) при изменении размера:
Что такое соотношение сторон?
Соотношение сторон элемента описывает пропорциональную связь между его шириной и высотой. Два распространенных видео пропорции являются 4:3 (универсальный формат видео 20-го века), и 16:9 (универсальный для HD телевидения и Европейского цифрового телевидения).
Как-высота равна ширине
Шаг 1) добавить HTML:
Используйте элемент контейнера, например , и если требуется текст внутри него, Добавьте дочерний элемент:
Свойства, указанные для .tile, никакого значения для решения данной задачи не имеют и добавлены для наглядности.
Живой пример по ссылке.
Пропорциональное изменение высоты достигается за счет свойства padding-top для .tile .img. В примере приведена цифра 66.5%, которая в общем случае равна:
Heightизображения × 100% / Widthизображения + вертикальный отступ от изображения до следующего блока.
Там использован стандартный прием с display:block; и max-width:100% для изображений:
Если увеличивать/уменьшать ширину контейнера, то изображение уменьшает/увеличивает свою ширину и одновременно пропорционально уменьшает/увеличивает свою высоту. Это очень крутая особенность изображений, много где выручает.
Как сделать так, чтобы при увеличении/уменьшении высоты контейнера, изображение вело себя подобно первому случаю: высота изображения становилась равна высоте контейнера и ширина изображения тоже пропорционально уменьшалась/увеличивалась? Как это сделать без Яваскрипта? (Как сделать с Яваскриптом я знаю.) Можно использовать самые новомодные CSS3 штуки.
Такое форматирование позволяет предотвратить превышение любым из имеющихся на странице img элементов ширины его контейнера. И в ситуации, когда контейнер становится ýже содержащегося в нем изображения, элемент изображение пропорционально уменьшает свою ширину, для того, чтобы быть в рамках контейнера. Все очень просто, не правда ли, однако, есть нюансы.
Если в разметке у элемента изображения имеются контентные атрибуты размерностей ( width и height ) и вы, используя приведенный выше способ, средствами CSS переопределяете его ширину, высота изображения останется прежней, поскольку ее значение определяется с помощью контентного атрибута элемента. А это, естественно, приведет к искажению изображения.
Простейший способ предотвращения подобной проблемы заключается в исключении атрибутов width и height из разметки элемента. Однако, именно такой способ определения размеров изображения, с помощью контентных атрибутов, наиболее предпочтителен с точки зрения производительности ресурса, поскольку это позволяет снизить время, требуемое браузеру для отображения изображения. Более детально данный вопрос раскрывается в рекомендациях Google по определению размеров изображения. Каких либо жестких рекомендаций по размещению этих данных нет, они могут содержаться в HTML разметке и/или определяться с помощью CSS кода. Я, все же, склоняюсь к мнению, что как с практической, так и с логической точки зрения, необходимо использовать HTML атрибуты.
Итак, мы хотим указывать требуемые размеры наших изображений и в тоже время получить возможность их пропорционального масштабирования. К счастью, такой способ есть, более того, он невероятно прост — необходимо добавить CSS декларацию, переопределяющую явно указанное значение высоты контентным атрибутом в HTML . То есть совместно с max-width нужно использовать height:auto :
Теперь масштабирование изображений будет происходить без искажений. Наглядный пример пропорционального масштабирования содержащих атрибуты размерностей изображений можно увидеть на этой демо-странице.
Поддержка браузерами.
Даже в нашем, казалось бы простейшем случае, существует пару различий в реализации некоторыми браузерами, на которые необходимо обратить внимание, по крайней мере, если вы заинтересованы в предоставлении гибко изменяющейся по ширине компоновки в IE8 и ниже.
IE7 , кстати, выполняет пропорциональное масштабирование изображения независимо от того, указаны ли атрибуты размерностей в разметке и даже в том случае, если вы не используете декларацию height:auto .
Что касается IE8 , то для корректного масштабирования изображений, вам, как ни странно, потребуется помимо переопределения установленной в разметке высоты, переопределить и значение ширины. К великой радости, наличие дополнительной декларации width:auto не вызывает никаких проблем в других браузерах. Итак, для пропорционального масштабирования изображений в IE8 вам необходимо использовать следующее правило:
Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера?
Для изображений это делается очень просто, задаем свойству height значение auto , при этом максимальную ширину изображения ограничиваем шириной родительского контейнера max-width: 100%;
Проблема в том, что мы не можем задать height: auto; для блочных элементов, например для DIV. В данном случае 100% – это будет высота родителя.
Решение проблемы
Нам нужны два блочных элемента для достижения желаемого поведения. Нет изображений, нет Javascript.
Итак, что это? Мы определяем псевдоэлемент для нашего ящика и задаем ему margin-top 100% . Поскольку это 100% значение относится к ширине элемента … вы получаете его ( height: 0; padding-bottom: 100%; также будет работать, но тогда вы должны отрегулировать значение padding-bottom каждый раз, когда вы меняете ширину).
Таким образом, наш блок уже выше ширины. Если вы хотите отображать только несколько цветных блоков, тогда уже все готово. Но поскольку пользовательский интерфейс намного сложнее, и если вы также предоставляете некоторый контент, мы добавляем контент в наш блок .box .
Контент
И вот трюк: мы просто позиционируем блок контента как абсолютный со всеми четырьмя ориентациями, установленными в 0. Это просто покрывает родительский элемент полностью, независимо от того, какой размер он имеет.
Вот и все. Блестяще, не так ли? Даже padding не сломает его, и нет необходимости в box-sizing: border-box здесь.
Другие пропорции
Если вы хотите создать другие коэффициенты, просто измените значение padding-top псевдоэлемента:
IE7 и ниже
Рабочий пример на CodePen:
Вариант №2 – Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS без псевдоэлементов
Есть второй вариант без псевдоэлементов, но при его использовании блок всегда имеет ширину 100%, поэтому если нужно несколько таких блоков в ряд, то они должны быть помещены в какой-то родитель, у которого уже будет задана нужная ширина относительно остальных элементов на странице.
Читайте также: