• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как вписать произвольную картинку в блок?
Как вписать произвольную картинку в блок?
workman
Дата: Вторник, 2017-10-24, 12:29 | Сообщение 1
Гл. Модератор
Сообщений:1717
Награды: 9


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

У нас имеется блок к примеру с названием стилей 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 - Вторник, 2017-10-24, 12:46
Страна: (RU)
workman
Дата: Вторник, 2017-10-24, 15:15 | Сообщение 2
Гл. Модератор
Сообщений:1717
Награды: 9


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

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

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


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


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


http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz

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


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

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