Aspect Ratio Fill - the right way

Question

I know, it has been asked before. The answers are insufficient although they are marked as correct.

I need something that fills a container with an image by showing the most of the image, centers it and preserves its ratio. Should be ajquery-plugin, a angular-directive or plain JS.

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

Of course should be enough where the script takes action then.

Solution for interest:

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

CSS

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

Script (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 + "')" );

    });

  })

Does this do what you want? http://stackoverflow.com/questions/18490334/responsive-image-full-screen-and-centered-maintain-aspect-ratio-not-exceed-wi — suryanaga, Dec 06 '15 at 14:38
Can you clarify specifically which answers are insufficient and why? — Michal Charemza, Dec 06 '15 at 15:16

score 2 · Accepted Answer · answered Dec 06 '15 at 14:55

2

with css on the DIV background-size: cover; background-position: center;

answered Dec 06 '15 at 14:55

Dux

309
1
5

Aspect Ratio Fill - the right way

1 Answers1