javascript - 长宽比填充 - 正确的方法

Question

我知道，以前有人问过。尽管答案被标记为正确，但答案仍不充分。

我需要一些东西，通过显示图像的大部分，将其居中并保留其比例，从而用图像填充容器。应该是 ajquery-plugin、一个 Angular-directive 或普通 JS。

<div ratio-fill>
  <img>
</div>

当然，脚本采取行动就足够了。

<小时/>

感兴趣的解决方案:

  <div ratio-fill="http://img.url"></div>

CSS

  *[ratio-fill] { background-size: cover;
    background-position: center; }

脚本(jQuery)

  /* img-ratio-fill */
  $(window).load(function(){

   /* ratio-fill-directive */
   $('*[ratio-fill]').each(function() { 

      var $this = $(this),
          imgUrl = $this.attr( "ratio-fill" );

      $this.css( "background-image", "url('" + imgUrl + "')" );

    });

  })

Answer 1

DIV 上有 css 背景大小:封面；背景位置:中心；