Изображение в полный размер

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

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

html{    
      /* Ensure the html element always takes up the full height of the browser window */ 
      min-height:100%;  
      position:relative;   
     } 

     body { 
      background:url('bg.jpg') center center; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-size:cover; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 

      /* Workaround for some mobile browsers */ 
      min-height:100%; 

      font-family: 'Asap', sans-serif;  

     }

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

HOw я могу получить его в масштабе с помощью браузера? Я использую bootstrap, если есть что-нибудь, что может помочь.

источник

2016-02-01 berimbolo

Вопрос заключается в том, что это допускается изображение, чтобы быть растянут в одном направлении? Если нет, что должно произойти, если экран не имеет той же формы, что и изображение? –

Некоторые из сайтов, о которых вы говорите, сделают одну из двух вещей; 1) Обрезать изображение каким-либо образом (скорее всего) или 2) растянуть/сжать изображение вдоль одной или обеих осей. Это происходит, и вы, вероятно, не заметили. Если окно просмотра браузера имеет соотношение 4: 3, но ваше изображение составляет 16: 9, что-то должно получиться, поскольку оба они не совпадают. Вы либо обрезаете изображение, либо растянете/сжимаете изображение. – hungerstar

Ну, когда я пробовал использовать тег изображения размером с страницу, он выглядел растянутым ..так и есть ответ, чтобы иметь обрезанное изображение для меньшего размера экрана? – berimbolo

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

Если вы хотите, чтобы изображение было все видно и, чтобы заполнить весь фон, используйте background-size:100vw 100vh или 100% 100%.
Примечание: Это искажает изображение, если оно не совпадает с формой.
```
html { 
 
     height:100%; 
 
     background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat; 
 
     background-size:100vw 100vh; 
 
    }
```
Чтобы изображение на весь экран без искажений, то вы можете использовать cover.
Примечание: это обрезает изображение, если оно не совпадает с формой.
```
html { 
 
     height:100%; 
 
     background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat; 
 
     background-size:cover; 
 
    }
```
Чтобы изображение будет максимально возможный размер без обрезки или искажения, используйте contain.
Примечание: это не будет заполнять все окно, если изображение не имеет одинаковую форму.
```
html { 
 
     height:100%; 
 
     background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat; 
 
     background-size:contain; 
 
    }
```

источник

2016-02-01 20:09:02

Пояснения, которые вы предоставили, были отличными, спасибо. – berimbolo

Спасибо. Пока этот вопрос задавали раньше, я не мог найти его с полными ответами (с ясными примерами), поэтому мне просто пришлось написать его сам. –

Самый простой способ сделать это:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Вы можете посмотреть другие манеры решить эту проблему здесь: https://css-tricks.com/perfect-full-page-background-image/

Я надеюсь, что я могу вам помочь.

источник

2016-02-01 19:41:08

Это то, что я использую. – berimbolo

Изображение в полный размер

ответ

Смежные вопросы