Вычислить ширину отношения apsect по высоте

Question

У меня есть встроенный img, который составляет 1280 (w) x 1024 (h) и содержится в div. Размеры divs устанавливаются на 100% (w/h) окна просмотра с скрытым переполнением.

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

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

Большое спасибо заранее.

Answer 1

Использование Бэкстретч http://srobbin.com/jquery-plugins/backstretch/

$("#demo").backstretch("http://urltoimage.jpg");' 

набор #demo до 100/100 ширина и высота%

Answer 2

Не совсем ответ на ваш вопрос, но потенциальная альтернатива - вы пробовали min-height/min-width CSS свойства?

HTML:

<div class="container"> 
     <div class="image-wrapper"> 
      <img src="..." /> 
     </div> 
    </div> 

CSS:

.container { 
    width: 100vw; 
    height: 100vh; 
    background-color: grey; 
} 

.image-wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

.image-wrapper img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    transform: translateX(-50%) translateY(-50%); 
} 

Fiddle: https://jsfiddle.net/mkjoyep1/

В примере, .container (ваша полная ширина/высота дел), заполняет ширину страницы vw/wh и тому .image-wrapper имеет width/height, установленный на 100%, который будет соответствовать ширине и высоте высота глаза наблюдателя Используя overflow: hidden, действуя как механизм обрезки, вы можете растянуть изображение, чтобы заполнить его контейнер. Я разместил изображение в центре с помощью метода, изученного here.

Это работает для меня в Chrome и Firefox.

* Отредактировано включить HTML/CSS

Answer 3

Если вы не 100% приклеены к используя IMG тег, вы можете сделать следующее:

HTML

<div id="background"></div> 

CSS

#background { 
    background: url('path/to/img.jpg'); 
    background-size: cover; 
    background-position: center center; 
    width: 100vw; 
    height: 100vh; 
}