• Страница 1 из 1
  • 1
Форум про uCoz » uCoz система » Все о uCoz » КАК ВПИСАТЬ ПРОИЗВОЛЬНУЮ КАРТИНКУ В БЛОК!
КАК ВПИСАТЬ ПРОИЗВОЛЬНУЮ КАРТИНКУ В БЛОК!
milan_shubin OfflineДата: Среда, 25.10.2017, 15:39 | Сообщение # 1
milan_shubin
Проверенный
Сообщений: 94
5

Приветствую вас дамы и господа.

У нас имеется блок к примеру с названием стилей myBlock и сейчас мы в этом маленьком уроке в него впихнем картинку любого размера, под ширину и высоту блока.

Установка:

За основу написал квадратный блок и вставил в него картинку таким способом.
Код
<div class="myBlock">
    <img src="workman.png">
</div>


Теперь, Для того чтобы эта картинка помещалось полностью либо в длину, либо в ширину блока, воспользуемся прямо для этого предназначенными свойствами CSS width: 100%; и height: 100%; о которых почему-то достаточно часто забывают ставить 04b Выглядит это примерно так:
Код
.myBlock {
    width: 200px;
    height: 200px;
}
.myBlock img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}


Также многие задали вопрос - "Как установить картинки данным кодом в один ряд?" А вот так:
Код
<div class="Block">
тут весь код что выше
</div>

Ну и сами стили к нему, которое выровняет блоки в одну строку
Код
.Block {
  display: flex;
}


Вот и всё!
Данный материал был взять с сайта zornet.ru

Данный материал был предоставлен веб-мастером "workman"


Форум про uCoz » uCoz система » Все о uCoz » КАК ВПИСАТЬ ПРОИЗВОЛЬНУЮ КАРТИНКУ В БЛОК!
  • Страница 1 из 1
  • 1
Поиск: