Блог

Главная - Вопросы по программированию - Как сделать так, чтобы страница прокручивалась в нижней части изображения

Как сделать так, чтобы страница прокручивалась в нижней части изображения

#html #css

Вопрос:

Мне действительно нечего показать, но я попытаюсь объяснить.

Я использую HTML и CSS, и у меня есть фоновое изображение размером с луну. (3840×18509 пикселей). Как я могу добавить это в качестве фона на странице, заставить его автоматически масштабироваться до экрана и сделать его прокручиваемым? Я имею в виду, что я хочу иметь возможность прокручивать всю длинную картинку до конца. использование :обложка не делает этого, и когда я устанавливаю высоту:18509 пикселей; Изображение становится шире, чем должно быть, так что оно вырезается по бокам.

Я хочу, чтобы веб-сайт был таким же широким, как исходное изображение, и таким же высоким, как исходное изображение. Я хочу показать всю картинку таким образом, чтобы она соответствовала ширине экрана, но должна быть прокручена вниз, чтобы добраться до нижней части. Заранее спасибо.

 body, html {
    
    margin: 0; 
    padding: 0; 
    border: 0; 
    background-image: url("HuronWP.png");
    background-repeat: no-repeat;
    background-size: cover; I dont want it to cut the image height, 
    i want to scroll down to see the rest.
    
    
}
}

Комментарии:

1. Всем очень полезно предоставить свой код !

2. Вы точно знаете соотношение сторон вашего изображения Луны заранее? Звучит так, как будто ты знаешь, но подумал, что мне лучше проверить.

Ответ №1:

Если вы знаете точный размер изображения, вам просто нужно установить aspect-ratio <body> размер, соответствующий изображению: body { aspect-ratio: 3840 / 18509; } 

 body {
  margin: 0;
  background-image: url('https://www.tacoshy.de/stackoverflow/3840x18509.jpg');
  aspect-ratio: 3840 / 18509;
}

В качестве альтернативы вы можете вставить изображение напрямую и использовать width: 100% его для подгонки к экрану, сохраняя при этом его соотношение сторон.

 img {
  width: 100%;
  display: block;
}

/* for styling purpose only */
body {
  margin: 0;
} 
 <img src="https://www.tacoshy.de/stackoverflow/3840x18509.jpg">

Комментарии:

1. Просто замечание о том, что соотношение сторон только начинает появляться в Safari (с версией 15).

Ответ №2:

Я думаю, вы хотите прокручивать свое изображение всякий раз, когда оно становится шире или длиннее вашей страницы. Вы можете сделать это просто с помощью css overflow property .

 overflow:scroll;

Просто добавив это в наш код, он будет работать нормально.
Всякий раз, когда высота или ширина изображения будут больше, чем у вашего контейнера, оно автоматически будет прокручиваться.

Здесь я создал класс div и поместил свое изображение в этот div.

 <div class="image">
  <img
    src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
    alt="img"
  />
</div>

Теперь я меняю height и width свой <img> так, чтобы это был overflow <div> класс.

высота и ширина image. 

 img {
    height: 1000px;
    width: 1000px;
  }

высота и ширина наружного div 

 .image{
    height: 900px;
    width: 900px;
    overflow: scroll;
  }

Это property будет valid только тогда, когда внешний div должен быть меньше height и width inner ,

Комментарии:

1. вы упускаете из виду вопрос. Он не хочет прокручивать изображение по горизонтали. Он хочет, чтобы изображение соответствовало ширине видовых экранов и могло прокручиваться вниз до нижней части изображения, когда оно заполняет видовой экран по вертикали. Ничто из этого не гарантирует этого, так как видовые экраны не все имеют ширину ровно 900 пикселей. Отзывчивое решение будет работать с относительными единицами измерения, как в моем примере внизу.

Метки: ,