Как всерстать вот так изображения?

Для верстки изображения, подобного представленного в вашем вопросе, вам понадобятся некоторые CSS-техники. Вот пошаговое руководство, которое поможет вам достичь желаемого результата:

1. Создайте HTML-разметку:
Для начала определите контейнер, в котором будет располагаться изображение. Добавьте в разметку элемент с классом "image-container" и вставьте внутрь него элемент "img" с источником изображения, которое вы хотите отобразить.

<div class="image-container">
  <img src="путь_к_изображению" alt="Описание изображения">
</div>

2. Определите стили для контейнера изображения:
В CSS-файле добавьте стили для класса "image-container". Установите желаемую ширину и высоту контейнера и задайте значение "position: relative", чтобы определить его позиционирование относительно родительского элемента.

.image-container {
  width: 400px;
  height: 400px;
  position: relative;
}

3. Добавьте стили для изображения:
Чтобы изображение находилось по центру контейнера, задайте ему свойство "position: absolute" и установите значения "top: 50%" и "left: 50%". Затем используйте функцию "translate" для смещения изображения на половину его размеров относительно центра.

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. Добавьте стили для обводки:
Чтобы добавить пунктирную обводку вокруг изображения, используйте свойство "border" со значениями "3px dashed" для установки ширины и стиля обводки, а также свойство "border-radius" для добавления скругленных углов.

.image-container img {
  border: 3px dashed;
  border-radius: 10px;
}

5. Добавьте стили для тени:
Чтобы создать тень вокруг изображения, используйте свойство "box-shadow" и установите значения "0 0 10px rgba(0, 0, 0, 0.5)" для задания горизонтального и вертикального смещения, размера тени и ее цвета.

.image-container img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

6. Добавьте дополнительные стили:
Если вам нужно добавить дополнительные стили, такие как изменение размера изображения при наведении курсора, изменение цвета обводки илии изменение фона контейнера, вы можете использовать свойства "transition", "hover" и "background" соответственно.

.image-container {
  background: #f1f1f1;
}

.image-container img {
  transition: transform 0.3s ease;
}

.image-container img:hover {
  transform: scale(1.1);
  border-color: red;
}

Это основные шаги для верстки изображения, подобного представленного в вашем вопросе. Конечно, вы можете настроить его дальше, в зависимости от ваших потребностей и предпочтений.