Для достижения такого же визуального эффекта, как на изображении, вам может понадобиться использовать CSS свойства "background-image" и "background-size".
Пример кода:
HTML:
```html
<div class="adaptive-element"></div>
```
CSS:
```css
.adaptive-element {
width: 100%;
height: 300px;
background-image: url('путь_к_фото.jpg');
background-size: cover;
}
```
В данном примере, элемент с классом "adaptive-element" будет автоматически заполнять всю доступную ширину экрана и иметь высоту 300 пикселей. Фото, определенное в свойстве "background-image", будет автоматически размещаться на фоне элемента, а свойство "background-size: cover" позволит автоматически подгонять размер фото, чтобы оно полностью заполнило заданные размеры элемента.
Чтобы реализовать замену фото на устройствах с разными ширинами экрана, вам может потребоваться использовать медиа-запросы. Ниже приведен пример:
CSS:
```css
.adaptive-element {
width: 100%;
height: 300px;
background-size: contain;
background-repeat: no-repeat;
}
@media (max-width: 767px) {
.adaptive-element {
background-image: url('путь_к_фото_маленькое.jpg');
}
}
@media (min-width: 768px) {
.adaptive-element {
background-image: url('путь_к_фото_большое.jpg');
}
}
```
В данном примере, на устройствах с шириной экрана до 767 пикселей будет использоваться фото изображение с небольшим размером ('путь_к_фото_маленькое.jpg'), а на устройствах с шириной экрана 768 пикселей и больше будет использоваться фото с большим размером ('путь_к_фото_большое.jpg').
