• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Разместить изображение в контейнере блока (Разместить изображение в контейнере который по размеру)
Разместить изображение в контейнере блока
Kosten
Дата: Суббота, 2019-05-04, 23:31 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Изменяет подгонку и положение изображения в контейнере, сохраняя соотношение сторон. Ранее возможно только с использованием фонового изображения и background-size свойства. Вы когда-нибудь хотели, чтобы изображение вписывалось точно в определенное заданное измерение, но сохраняя его пропорции и избегая получения сжатого изображения.

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



HTML

Код
<img class="gakunkab kandus-vasulomeg" src="Ссылка на изображение №1" />
<img class="gakunkab kalods-maxetulok" src="Ссылка на изображение №2" />

CSS

Код
.gakunkab {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}
.kandus-vasulomeg {
  object-fit: contain;
  object-position: center;
}
.kalods-maxetulok {
  object-fit: cover;
  object-position: right top;
}


object-fit: contain подходит для всего изображения в контейнере, сохраняя его пропорции.
object-fit: cover заполняет контейнер изображением, сохраняя его пропорции.
object-position: [x] [y] размещает изображение в контейнере.

Демонстрация
Прикрепления: 0148950.png(120.6 Kb) · sanum.zip(1.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Разместить изображение в контейнере блока (Разместить изображение в контейнере который по размеру)
  • Страница 1 из 1
  • 1
Поиск: