Отзывчивое изображение без обрезки

Question

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

Полный экран шаблона vídeo отлично подходит для меня. Я использую этот код:

<div style="background-color: #000000; 
      width: 100%; 
      height: 100%; 
      z-index: 997; 
      position: fixed; 
      top: 0; 
      left: 0;"> 
<video autoplay poster="img/jerusalem.jpg" id="bgvid" loop style=" 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    max-height: 100%; 
    z-index: 998; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%);"> 
    <source src="video/jerusalem.webm" type="video/webm"> 
    <source src="video/jerusalem.mp4" type="video/mp4"> 
    <source src="video/jerusalem.ogv" type="video/ogg"> 
</video> 
</div> 

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

<div style="background-color: #000000; 
      width: 100%; 
      height: 100%; 
      z-index: 997; 
      position: fixed; 
      top: 0; 
      left: 0;"> 
    <img src="img/bg1.jpg" style=" 
    position: fixed; 
    top: 50%; 
    left: 50%; 

    width: 100%; 
    max-height: 100%; 

    z-index: 998; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%);"> 
</div> 

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

max-width: 100%; 
max-height: 100%; 

Кто-то может мне помочь? : D

Answer 1

Попробуйте использовать CSS свойства изображения т.е.

.imageclass 
{ 
    width:100% 
    height: auto; 
    background-attachment: fixed; 
    background-size: contain; /* or cover , etc */ 
    background-position: center; 
    background-repeat: no repeat; 

} 

в CSS выше, фон-размер: содержать; свойство изменить размер изображения по отношению к содержимому и изменить размер самого себя.

Answer 2

Вместо использования <img> попробуйте использовать background-image следующим образом:

.image_box { 
background-image: url("img/bg1.jpg"); 
background-repeat: no-repeat; 
background-position: center; 
} 

использовать этот класс для <div>.

также, вы можете играть с помощью растягивания background-size: contain/etc...

Пожалуйста, обратитесь к http://www.w3schools.com/cssref/css3_pr_background-size.asp для получения дополнительной информации фонового размера.