CSS background image, чтобы соответствовать ширине, высота должна автоматически масштабироваться пропорционально

Ответ 1

Для этого есть свойство CSS3, а именно background-size (проверка совместимости). Хотя можно задать значения длины, обычно используется со специальными значениями contain и cover. В вашем конкретном случае вы должны использовать cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Яйца для contain и cover

Извините за плохой каламбур, но я собираюсь использовать картинку дня Biswarup Ganguly для демонстрации. Допустим, что это ваш экран, а серая область находится за пределами видимого экрана. Для демонстрации я собираюсь принять соотношение 16x9.

Мы хотим использовать вышеупомянутую картину дня в качестве фона. Однако по какой-то причине мы обрезали изображение до 4x3. Мы могли бы установить свойство background-size на фиксированную длину, но мы сосредоточимся на contain и cover. Обратите внимание, что я также предполагаю, что мы не изменяли ширину и/или высоту body.

contain

contain

Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до самого большого размера, чтобы его ширина и высота могли поместиться внутри области позиционирования фона.

Это гарантирует, что фоновое изображение всегда полностью содержится в области фонового позиционирования, однако в этом случае может быть пустое пространство, заполненное вашим background-color:

cover

cover

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

Это гарантирует, что фоновое изображение покрывает все. Не будет видимого background-color, но в зависимости от соотношения экрана большая часть вашего изображения может быть отключена:

Демонстрация с фактическим кодом

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Ответ 2

Основываясь на советах https://developer.mozilla.org/en-US/docs/CSS/background-size, я получаю следующий рецепт, который работал у меня

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Ответ 3

Я не уверен, что вы ищете точно, но вы действительно должны проверить эти превосходные записи в блоге, написанные Крисом Койером из CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Прочитайте описания каждой статьи и посмотрите, что они ищут.

Первый ответит на следующий вопрос:

Есть ли способ изменить размер фонового изображения? Как и в, заполните фон веб-страницы от края до края с помощью изображения, независимо от размера окна браузера. Кроме того, при изменении окна браузера размер изменяется больше или меньше. Кроме того, убедитесь, что он сохраняет свое соотношение (не растягивается странно). Кроме того, не вызывает полосу прокрутки, просто отключается вертикально, если нужно. Кроме того, он появляется на странице как встроенный тег.

Вторая задача состоит в том, чтобы получить следующее "фоновое изображение на веб-сайте, которое все время охватывает все окно браузера".

Надеюсь, что это поможет.

Ответ 4

Просто добавьте эту строку:

    .your-class {
        height: 100vh;
    }

vh - высота окна просмотра. Это автоматически масштабируется, чтобы соответствовать окну браузера устройства.

Подробнее здесь: Сделать div на 100% высотой окна браузера

Ответ 5

Попробуйте это,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Ответ 6

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

Плохой код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Хороший код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

Ключевым здесь является добавление этого элемента → background-size: содержать;

Ответ 7

Фоновое изображение не установлено Perfect, поэтому его css создает проблему, поэтому его css файл изменяется ниже кода

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

Ответ 8

Вот что сработало для меня:

background-size: auto 100%;