Обрезка и центрирование изображений CSS3

by Евгений

HTML

<div style="margin: 20px;"><input type="url" id="url" style="width: 100%;" placeholder="ссылка на изображение">
    <a href="http://css-live.ru/articles/adaptiruyushhiesya-kartinki-zastavki-na-css.html" target="_blank">отсюда</a></div>
    
    
<div class="CoverImage FlexEmbed FlexEmbed--3by1"
     style="background-image:url(http://placeimg.com/1000/1000/nature)"
></div>

<div class="CoverImage FlexEmbed FlexEmbed--2by1"
     style="background-image:url(http://placeimg.com/1000/1000/nature)"
></div>

<div class="CoverImage FlexEmbed FlexEmbed--16by9"
     style="background-image:url(http://placeimg.com/1000/1000/nature)"
></div>

<div class="CoverImage FlexEmbed FlexEmbed--4by3"
     style="background-image:url(http://placeimg.com/1000/1000/nature)"
></div>

CSS

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

.FlexEmbed:before {
  content: "";
  display: block;
  width: 100%;
}

.FlexEmbed--3by1:before {padding-bottom: 33.33333%;}
.FlexEmbed--2by1:before {padding-bottom: 50%;}
.FlexEmbed--16by9:before {padding-bottom: 56.25%;}
.FlexEmbed--4by3:before {padding-bottom: 75%;}

.CoverImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto 1em;
  max-height: 120px;
  max-width: 180px;
}

JavaScript

document.querySelector('#url').oninput = function() {
    var divs = document.querySelectorAll('.CoverImage');
    var len = divs.length;
    while (len--) {
        divs[len].style.backgroundImage = 'url(' + this.value + ')';
    }
}