Страница 1 из 11
Общий форум » Все для вебмастера » Начинающий Вебмастер » Как вписать произвольную картинку в блок?
Как вписать произвольную картинку в блок?
workman
Дата: Вторник, 24.10.2017, 12:29 | Сообщение 1
Гл. Модератор
Сообщений:1696
Награды: 8


Все также очень просто!

У нас имеется блок к примеру с названием стилей 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;
}

исходя из этого, картинка занимает либо всю длину либо всю ширину блока.

Что из этого получится тут


Сообщение отредактировал
workman - Вторник, 24.10.2017, 12:46
Страна: (RU)
workman
Дата: Вторник, 24.10.2017, 15:15 | Сообщение 2
Гл. Модератор
Сообщений:1696
Награды: 8


Тут же прилетел вопрос мне - "Как установить картинки данным кодом в один ряд?"
Показываю тут

Код
<div class="Block">
тут весь код что выше
</div>

Ну и сами стили к нему,которое выровняет блоки в одну строку
Код
.Block {
  display: flex;
}
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 16:03 | Сообщение 3
Администраторы
Сообщений:16015
Награды: 51


Здесь тоже нужно знать про значение и свойства margin и padding, думаю они пригодятся.
Страна: (RU)
waak
Дата: Среда, 25.10.2017, 01:06 | Сообщение 4
Vip
Сообщений:378
Награды: 12


Что значит произвольную? может адаптивную? так как по мне произвольная это ти-по случайная
а если картинка будет меньше чем блок?
то её размер не подстроится на сколько я могу судить по вашему примеру


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545

http://talantlev.ucoz.ru


Сообщение отредактировал
waak - Среда, 25.10.2017, 01:08
Страна: (RU)
workman
Дата: Среда, 25.10.2017, 07:06 | Сообщение 5
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата waak ()
то её размер не подстроится на сколько я могу судить по вашему примеру

Подстроится .. .Просто убрать max на ширине и также оставить 100%
Страна: (RU)
Общий форум » Все для вебмастера » Начинающий Вебмастер » Как вписать произвольную картинку в блок?
Страница 1 из 11
Поиск: