Вставка изображений с помощью img и через css

Использование тега <img>

Я предполагаю, что все знают, что такое изображения, поскольку часто с ними приходится работать при создании сайта. Изображения технически не вставляются в веб-страницу, а лишь связаны с ней. Обычно мы используем тег <img> для отведения места под изображение.

И когда кто-либо загружает вашу веб-страницу, именно браузер, фактически в этот момент, получает изображение с сервера и вставляет его в отведенное место (<img>).

Этот принцип работы совершенно отличается от включение изображений, например в редактор Word, где изображение включается (становится частью документа).

Поэтому ссылка на изображения очень важна. Ведь если вы ссылаетесь на чужой сервер, то есть вероятность, что это изображение будет удалено или перемещено. И тогда вместо картинки вы получите значок неработающей ссылки.

 

 

 

Использование CSS

С помощью CSS можно задать фоновое изображение блочным и строчным (display: block/inline) элементам. Это очень удобно, если блок является родителем для других блоков, расположенных сверху. Или если для блока необходимо задать фиксированный размер, то фоновое изображение будет обрезаться ровно по блоку.

Давайте рассмотрим пример:

HTML

 

CSS

background-position: center задает начальное положение фонового изображения.

background-size: cover масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Результат