подогнать фоновое изображение к ширине браузера и при необходимости увеличить высоту - PullRequest
Новая
       40

подогнать фоновое изображение к ширине браузера и при необходимости увеличить высоту

0 голосов
/ 20 июня 2019

у меня есть портретное изображение (ширина: 869px; высота: 2853px), которое я хочу использовать в качестве фонового изображения для моего сайта.изображение должно быть отзывчивым и всегда заполнять всю ширину окна браузера.изображение должно сохранять свои пропорции и никогда не должно быть обрезано.для этого высота должна соответствовать данной ширине.так как высота изображения всегда больше, чем высота области просмотра, вы должны быть в состоянии прокрутить до нижней части изображения, которая также должна быть нижней частью веб-сайта.

я был бы очень признателен, если бы кто-топодскажите как это сделать.

Ответы [ 2 ]

1 голос
/ 24 июня 2019

Я думаю, что другие комментаторы игнорируют ваш запрос о помощи, чтобы не «обрезать» изображение, когда они продолжают предлагать background-size: cover.

Вот то, что я собрал, ваши требования:

  • Изображение, которое будет фоном, позади содержания вашего сайта.
  • Фоновое изображение имеет определенное соотношение сторон и не должно быть обрезано
  • Если окно браузера не соответствует формату изображения, оно должно позволять прокрутку по вертикали, но всегда должно соответствовать ширине окна.

Решение только для css ... 

body {
  position: relative;
  margin: 0;
}
body::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 0;
  /* height / width = ratio% */
  /* 2853px / 869px = 328.3084% */
  padding-bottom: 328.3084%;
  padding-bottom: calc(2853 / 869 * 100%);
  background: url('//placekitten.com/869/2853') center top / 100% auto no-repeat;
}

Замените URL-адрес URL-адресом вашего изображения, и, если размеры пикселя изображения изменятся, обновите их, как я прокомментировал, как padding-bottom должен быть рассчитан.

Это создает отдельный фоновый элемент внутри тела сайта и, тем не менее, позволяет вам иметь любой контент, который вы хотите внутри своего сайта. Но имейте в виду, что если вы находитесь на очень маленьком экране, скажем, 320px / 480px, и содержание веб-сайтов становится очень высоким из-за узкой ширины экрана, это фоновое изображение можно прокручивать и передавать для учета содержимого. Это не нарушит этот код, но я бы просто предложил добавить цвет фона или текстуру в ваш HTML-элемент, который будет показан под изображением в этом случае. Удачи.

0 голосов
/ 20 июня 2019

Следуйте этому руководству: https://www.w3schools.com/css/css_background.asp

Это общий код CSS для этого. 

body {
  background-image: url("image.png"); //or image.jpg
  background-repeat: no-repeat; // if you want to repeat the image if it doesn't fit the screen size Not needed if you have background-size: cover;
  background-position: right top; //center center is a common favourite
  background-attachment: fixed;
  background-size: cover; //to cover the whole size of the body
}

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

Вы также можете сделать снимок и в зависимости от размера экрана использовать другое изображение для этого размера экрана: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Вот общий код для этого: 

@media only screen and (max-width: 600px) {
  body {
    background-image: url("different_image.png");
    background-repeat: no-repeat; //Not needed if you have background-size: cover;
    background-position: right top;
    background-attachment: fixed;
    background-size: cover;
  }
}
...