Мой Справочник | HTML | Изображения

CSS-свойство clip: rect(5px,110px,40px,10px); обрезает изображения

Ссылки
Теги	Описание	Атрибуты	Описание
<img>	Изображение По умолчанию: `display: inline;`	src	путь к расположению файла, URL-адрес
		width	Ширина отображения в px
		height	Высота отображения в px
		alt	Альтернативный текст, на случай отсутствия файла
		border	Рамка border="5"
		sizes	Задаёт размеры изображения для разных макетов страницы sizes="(max-width: 600px) 300px, (min-width: 600px) 600px" // или так: (: это иначе, vw - процент от ширины вьюпорта) sizes="(min-width: 600px) 50vw : 100vw"
		srcset	Путь к графическим файлам с учётом размера изображения и устройств srcset="image/mushroom_retina.jpg 2x"
		align	выравнивание
<picture>	Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров		Не стоит стилизовать этот тег, этот тег сугубо для настройки вложенных изображений! Только для адаптивности, чтобы грузить только поддерживаемые форматы
<source srcset="...">	Путь к SVG-файлу		Не стоит стилизовать этот тег!!!
<figure>	Контейнер для изображений
<figcaption>	Подпись для изображения

Изображение с относительным источником


		<img src="../pict/kitty2.jpg" width="250" alt="Картинка" border="2">


		<img src="https://st2.depositphotos.com/7641714/10640/i/600/depositphotos_106400180-stock-photo-heart-from-a-book-pages.jpg" width="200" alt="Картинка">

Изображение с абсолютным источником

Вставка векторного изображения с помощью <picture>


		<picture>

		    <source srcset="../pict/shoes.svg">

		    <img src="../pict/shoes.png" alt="img" height="200">

		    <!--Будет грузиться ../pict/shoes.png, если браузер не поддерживает SVG-формат, 

		    height="200" будет работать и для SVG-файла-->

		</picture>

Вставка изображения в контейнере <figure>


		<figure>

		    <p><img src="../pict/guitar.png" width="250" alt="Гитара" border="2"></p>

		    <figurecaption>Гитара</figurecaption>

		</figure>

Контейнер для изображений

.img-cont {

  display: flex; 

  width: 500px; 

  height: 200px; 

  justify-content: center; /* центруем img по гор*/

  align-items: center; /* центруем по img верт (flex-end, flex-start тоже можно применять)*/

}

.img-cont {

  max-width: 100%; 

  max-height: 100%; 

}

После этого изображение будет пропорционально растягиваться внутри контейнера до размеров контейнера большей стороной, а меньшая будет центроваться

ФОНЫ для ретиновых дисплеев

// Ретиновые фоны (для блоков задавать фону нужный размер и подгружать изображения больше по ширине в 2-3 раза при ретиновом дисплее
Нужно просить у дизайнеров картинки в 2 раза большие по размеру!!!
.sample { width: 200px; backgroung-repeat: no-repeat; backgroung-image: url("img/bg200px.png"); backgroung-size: 200px auto; } // Если дисплей ретиновый, то: @media (min-resolution: 1.5dppx) { .sample { backgroung-image: url("img/bg400px.png"); } }

ИЗОБРАЖЕНИЯ для ретиновых дисплеев

// Для ретиновых дисплеев будет грузиться файл pict800px.png <img src="img/pict400px.png" width="400" srcset="img/pict800px.png 2x"> // Можно указывать сразу несколько изображений для двух- и трехслойной ретины <img src="img/pict400px.png" width="400" srcset="img/pict800px.png 2x, img/pict1200px.png 3x"> // Или таким образом (w - ширина физ. пикселей): <img src="img/pict400px.png" width="400" srcset="img/pict800px.png 800w, img/pict1200px.png 1200w">

Резиновые изображения

// Картинка будет занимить 100% ширины своего контейнера при уменьшении родителя (будет пропорционально уменьшаться), а при увеличении контейнера останется дефолтное значение ширины. CSS-код можно вставлять для всех картинок, хорошая практика
<img src="img/pict.png" width="400"> img { max-width: 100%; height: auto; }

Адаптивные изображения с помощью тега <picture>

// Будет загружаться изображение относительно ширины вьюпорта
<picture> <sourse media="(min-width: 960px)" srcset="img/large.png"> <sourse media="(min-width: 640px)" srcset="img/medium.png"> <img src="img/small.png"> </picture>

// Поддержка ретины
<picture> <sourse media="(min-width: 960px)" srcset="img/large.png 1x, img/large.png 2x"> <sourse media="(min-width: 640px)" srcset="img/medium.png 1x, img/large.png 2x"> <img src="img/small.png" srcset="img/small.png 2x"> </picture>

// Новые форматы
<picture> <sourse type="image/webp" srcset="img/pic.webp"> <sourse type="image/vnd.ms-photo" srcset="img/pic.jpxr"> <img src="img/pic.jpg"> </picture>

// Примерное отражение всех возможностей (весь код только для одной картинки :)

<picture>
  <source type="image/webp"
          media="(min-width: 960px)"
          srcset="img/desktop-large.webp 2x,
                  img/desktop-small.webp 1x">

  <source media="(min-width: 960px)"
          srcset="img/desktop-large.jpg 2x,
                  img/desktop-small.jpg 1x">

  <source type="image/webp" media="(min-width: 640px)"
                            srcset="img/mobile-large.webp 2x,
                                    img/mobile-small.webp 1x">

  <source media="(min-width: 640px)"
          srcset="img/mobile-large.jpg 2x,
                  img/mobile-small.jpg 1x">

  <img src="img/mobile-small.jpg">
</picture>

Картинки-заглушки

<img src="http://via.placeholder.com/330x185" alt="330x185">