Приветствую вас дамы и господа.
У нас имеется блок к примеру с названием стилей 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"