Отображение изображения в полную ширину, которое можно прокручивать вверх и вниз
Я пытаюсь отобразить это изображение https://i.imgur.com/GAxG97r.jpg на веб-странице полностью без увеличения. Я пробовал много способов сделать это, оно всегда либо обрезано, либо слишком увеличено. Вот мой текущий результат https://i.imgur.com/yjwVcCN.jpg с этим изображением, прокручиваемым сверху до снизу и слева направо. Я хотел бы, чтобы он был уменьшен и прокручивался только сверху вниз.
Вот ожидаемый результат, для которого мне нужно уменьшить окно браузера: https://i.imgur.com/ltk1RDL.jpg
Вот мой текущий CSS:
.bg {
background-image: url("https://i.imgur.com/GAxG97r.jpg");
width: 2880px;
height: 3800px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
Я отображаю этот элемент, используя просто это в своем теле
<div class = "bg"></div>
Я уверен, что решение этой проблемы очень простое, но после долгих исследований и невозможности запустить HTML с нуля я спрашиваю, можно ли просто отобразить его в полную ширину с возможностью прокрутки сверху вниз.
Вот полный код.
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
body, html {
}
.bg {
background-image: url("https://i.imgur.com/GAxG97r.jpg");
width: 2880px;
height: 3800px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class = "bg"></div>
</body>
</html>
Привет, я отредактировал свой OP с полным кодом, если вы хотите его воспроизвести. Я также добавил свой ожидаемый результат.
Ответы 2
Один из способов добиться этого — установить ширину bg на 100vw, то есть 100% ширины области просмотра, а затем установить background-size на contain и background-position на top center. Возможно, вам потребуется отрегулировать значение высоты.
.bg {
background-image: url("https://i.imgur.com/GAxG97r.jpg");
width: 100vw;
height: 3800px;
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}<div class = "bg"></div>Это работает как шарм, просто нужно установить правильную высоту. Большое спасибо !
Прохладный. Рад, что это помогло, но я бы порекомендовал также посмотреть ответ @kewwwa. Это, вероятно, более чистое решение, если вы можете отображать свое изображение в строке с тегом img.
Можно ли использовать тег «img» для отображения изображения? Для этого вам просто нужно установить его ширину на 100% (с помощью атрибута CSS или ширины). Высота будет адаптироваться для сохранения соотношения сторон.
Я думаю, это тоже решение, я посмотрю на это
Пожалуйста, воспроизведите вашу проблему здесь в виде фрагмента кода. Из вашего изображения я не могу понять, какой у вас текущий результат.