Почему изображения отображаются неправильно?

Question

Арсен

html

Почему изображения отображаются неправильно?

Как исправить код для того, чтобы при просмотре на мобильном устройстве выводилось изображение из переменной bgURLMob, а не bgURL, как это происходит в текущем коде?

25 апреля 2024 г. 13:40

Ответы на вопрос 2

Похожие вопросы

Answer 1

Изображения могут отображаться неправильно из-за того, что в коде используется одна переменная (например, bgURL) для задания фона, и при просмотре на мобильном устройстве это изображение может быть неподходящего размера или пропорции. Для того чтобы исправить это и использовать другое изображение (из переменной bgURLMob) при просмотре на мобильном устройстве, можно использовать медиа-запросы.

Пример исправленного кода:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        @media only screen and (max-width: 600px) {
            .container {
                background-image: url('bgURLMob.jpg');
            }
        }
        @media only screen and (min-width: 601px) {
            .container {
                background-image: url('bgURL.jpg');
            }
        }
        .container {
            width: 100%;
            height: 500px;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
```

В данном примере используется медиа-запрос, который проверяет ширину экрана устройства и в зависимости от этого выбирает какое изображение использовать в качестве фона. Код выбирает изображение из переменной bgURLMob для устройств с шириной экрана до 600px и из переменной bgURL для устройств с шириной экрана больше 600px.

Answer 2

Если вставлять изображение через тег picture, то работает нормально: 
 <picture>
				<source media="(min-width: 600px)" srcset={bgURL} />
				<source media="(max-width: 599px)" srcset={bgURLMob} />
				<img
					className="hero__bg"
					src={bgURL}
					width="359"
					height="694"
					alt={title}
				/>
			</picture>