Проблема с выходом картинки за границы основного блока (body) при уменьшении размера экрана может быть вызвана неправильным заданием стилей для контейнера, в котором находятся картинки.
Первым шагом следует проверить, является ли контейнер (например, div или другой элемент с определенным классом или id) на требуемым месте внутри body и правильно ли он задан в документе HTML.
Затем, чтобы обрезать картинки 2 и 4 справа экрана, можно использовать стандартные CSS-свойства, такие как `overflow: hidden` или `max-width: 100%`.
1) Для контейнера с картинками вы можете определить CSS-свойство `overflow: hidden`. Это свойство скрывает контент, который выходит за границы контейнера. Например:
```css
.container {
overflow: hidden;
}
```
2) Другой метод - использование свойства `max-width: 100%` для картинок. Это свойство задает максимальную ширину элемента в процентах от ширины его родительского элемента. Например:
```css
img {
max-width: 100%;
}
```
Обратите внимание, что при использовании свойства `max-width: 100%` картинка будет сохранять свои пропорции и не будет искажаться.
Примените один из этих методов к вашему контейнеру с картинками (например, установите соответствующий класс для соответствующего элемента в HTML и определите стили для этого класса). Это должно помочь обрезать картинки 2 и 4 справа экрана, чтобы они не вылазили за границы основного блока (body) при уменьшении экрана, так же, как левые картинки.
