ZorNet.Ru — сайт для вебмастера » HTML и CSS » Центрирование отзывчивого изображения CSS

Центрирование отзывчивого изображения CSS

При помощи стилей CSS, делаем адаптивную централизацию изображение или текста, которое отлично будет отображаться с мобильных аппаратов. Так как мы все знаем, что поисковые системы перешли на отзывчивый дизайн, что теперь веб мастеру нужно выстраивать под разные экраны приложений или мониторов с различными размерами. Что здесь вы уже сможете сделать картинку, а точнее разместить ее в стилистике своего дизайн, которое отлично впишется по своим характеристикам.

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

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

Приступаем к установке:

HTML

Код

CSS

Код

.nilsamdertuv {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  background: rgba(57, 70, 78, 0.8);
}
.nilsamdertuv_tedsamilha {
  width: 0;
  height: 0;
}
.nilsamdertuv img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform: translate(-49%, -49%);
  transform: translate(-49%, -49%);
  -moz-box-shadow: 0 11px 15px 0 rgba(0,0,0,0.25);
  -webkit-box-shadow: 0 11px 15px 0 rgba(12, 12, 12, 0.34);
  box-shadow: 0 11px 15px 0 rgba(14, 14, 14, 0.34);
}

Демонстрация

02 Мая 2018 Просмотров: 981 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0