• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как вписать произвольную картинку в блок?
Как вписать произвольную картинку в блок?
workman
 		Вторник, 24 Октября 2017, 12:29 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Все также очень просто!

У нас имеется блок к примеру с названием стилей 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 Октября 2017, 12:46
Страна: (RU)
workman
 		Вторник, 24 Октября 2017, 15:15 | Сообщение 2
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Тут же прилетел вопрос мне - "Как установить картинки данным кодом в один ряд?"
Показываю тут

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

Ну и сами стили к нему,которое выровняет блоки в одну строку
Код
.Block {
  display: flex;
}
Страна: (RU)
Kosten
 		Вторник, 24 Октября 2017, 16:03 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Здесь тоже нужно знать про значение и свойства margin и padding, думаю они пригодятся.
Страна: (RU)
waak
 		Среда, 25 Октября 2017, 01:06 | Сообщение 4
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Что значит произвольную? может адаптивную? так как по мне произвольная это ти-по случайная
а если картинка будет меньше чем блок?
то её размер не подстроится на сколько я могу судить по вашему примеру

Сообщение отредактировал
waak - Среда, 25 Октября 2017, 01:08
Страна: (RU)
workman
 		Среда, 25 Октября 2017, 07:06 | Сообщение 5
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата waak ()
то её размер не подстроится на сколько я могу судить по вашему примеру

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