Javascript 纵横比填充-正确的方法

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

我需要一些东西，通过显示图像的大部分来填充容器，使其居中并保持其比例。应该是ajquery插件、angular指令或纯JS

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

脚本（jQuery）

在DIV上使用css

---

背景尺寸：封面；背景位置：中心

你能用

背景尺寸：封面

来代替吗？这是你想要的吗？您能否明确说明哪些答案不充分以及原因？

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

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

  /* 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 + "')" );

    });

  })