Обрезание изображения полной полноты изображения

Я должен закрепить изображение, которое охватывает всю ширину. Следующие вещи не работали для меня

  1. clip: для этого требуется абсолютное положение, поэтому элементы блока не стекаются ниже
  2. background-position: он не зацикливается при увеличении увеличенной части при увеличении и наоборот.
  3. wrapper: высота обертки зависит от ширины браузера, поэтому ее значение должно быть динамическим.

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

document.onreadystatechange = setInterval(function () { if (document.readyState == "complete") { brow_width = document.body.clientWidth; var h1 = (brow_width/7); document.getElementById("clip1").style.opacity = "1"; if(brow_width > 700){ document.getElementById("clip1").style.height= h1; } else{ document.getElementById("clip1").style.height= 110; } var h2 = (brow_width/33.33); document.getElementById("clip2").style.opacity = "1"; if(brow_width > 700){ document.getElementById("clip2").style.height= h2; document.getElementById("banner2").style.top= h2 - brow_width*0.35; } else{ document.getElementById("clip2").style.height= 21; document.getElementById("banner2").style.top= -220; } } },1); 

  

Попробуй это:

HTML

  

CSS

 .banner { position: relative; padding-bottom: 15%; } .bannerImg { background-image: url(...); background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 

(Также здесь: http://jsfiddle.net/N6mCw/ )

Идея состоит в том, чтобы использовать внешнюю оболочку для обрезки изображения. Если вам нужно поддерживать IE <9, то вместо фонового изображения вам нужно будет добавить тег внутри внутреннего div и удалить CSS-код background-image:

  

Хотя … лучший способ сделать это – это на самом деле обрезать изображение до правильного соотношения сторон!