[Из песочницы] Центрирование изображений на странице


Вступление

Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 5 лет, такие задачи попадаются не часто.
Недавно столкнулся сразу с несколькими такими задачами:

1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера.

2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.

В принципе и первая и вторая задача решаема с помощью маленького javascript но мне хотелось сделать это по уму через html+css.
Еще задача облегчалась тем, что сайт, на котором это будет использоваться, разрабатывался современным, и поддержка ограничивалась ie9+, FF, Chrome, Safary, Opera.

Читать дальше →


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



Похожие публикации

[Из песочницы] Что поправить в верстке перед выпуском в продакшн?

Это статья — чек-лист того, что нужно не забыть поправить в любом проекте. Список полезных мелочей. Весь текст поделен на две части. Первая — про простые элементы страницы, такие как текст, кнопки,... читать далее

Разбираем возможности конвертирования HTML в PDF браузером Google Chrome

Недавно в одном стартапе я решал задачу генерации билетов в формате PDF. На тот момент уже был готов сайт с устоявшимся стеком технологий, поэтому я искал подход, который бы не потребовал... читать далее

[Из песочницы] Java библиотека для эффективной передачи CSS и JavaScript

В данной статье описывается способ передачи JavaScript и CSS методом соединения ресурсов, с последующими их минимизацией и сжатием, при помощи небольшой Java библиотеки «Combinatorius», что позволяет... читать далее

Заглушка для изображения с использованием padding-top и процентов

Когда мы проходим собеседования, нам часто задают вопросы по верстке. Зачастую они сводятся к перечислению значений свойства display или способов центрирования элементов. Меня это откровенно достало,... читать далее

[Из песочницы] Responsive design: сохранение формы элементов разметки

Одним из приемов адаптивного веб-дизайна является установка размеров элементов разметки в процентах относительно размеров контейнера их содержащего. Тем самым достигается пропорциональное изменение... читать далее

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте