Как расположить так картинки?

В HTML есть несколько способов расположения изображений на веб-странице. Давайте рассмотрим несколько примеров.

1. Использование тега <img> с атрибутами src, width и height:

<img src="путь_к_изображению" alt="описание_изображения" width="ширина_изображения" height="высота_изображения">

Например:

<img src="images/my_image.jpg" alt="Мое изображение" width="300" height="200">

Такой подход позволяет задать фиксированные размеры изображения.

2. Использование CSS селекторов и свойства background-image:

<div class="класс_элемента"></div>

.класс_элемента {
  background-image: url(путь_к_изображению);
  background-repeat: no-repeat;
  background-size: cover;
  /* Дополнительные стили */
}

Например:

.my-image {
  background-image: url(images/my_image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
  height: 200px;
}

<div class="my-image"></div>

Этот подход позволяет более гибко управлять расположением и размерами изображения.

3. Использование тега <figure> с тегом <img> и описанием:

<figure>
  <img src="путь_к_изображению" alt="описание_изображения">
  <figcaption>Описание или подпись к изображению</figcaption>
</figure>

Например:

<figure>
  <img src="images/my_image.jpg" alt="Мое изображение">
  <figcaption>Мое изображение</figcaption>
</figure>

Такой подход позволяет связать изображение с его описанием.

Кроме того, существуют различные фреймворки и библиотеки, такие как Bootstrap, Foundation и другие, которые предоставляют готовые компоненты для удобного расположения изображений на веб-странице.

Важно помнить, что при определении размеров изображений следует учитывать адаптивность и резиновость веб-страницы, чтобы они хорошо масштабировались на разных устройствах.