All geek questions in one place

Alternative installation option: cover for Internet Explorer

I am looking for an alternative object snap method: cover art for Internet Explorer because it does not support it. I mainly use the object form: a cover for not stretching the images inside the div. I look on the Internet for some solutions, but all I found was a solution to download an image from css instead of it from the img tag, how they do it. Does anyone have an alternative method for not stretching images inside a div in Internet explorerCan, does anyone help me?

here is a simple code

HTML

<div class="grid-image"> <img itemprop="image" alt="TEST" src="images/15.jpg"> </div>

CSS

 .grid-image { width: 100%; background-color: grey; position: relative; overflow: hidden; height: 100%; } grid-image img { object-fit: cover; width: 100%; height: 100%; overflow: hidden; }
+5
source share
2 answers

Ok i solved it with

HTML

 <div class="grid-image" style="background-image: url(images/15.jpg);"></div>

CSS

  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
+7
source

You can really create an alternative for ie9 + using Modernizr. That way you can still use the object where it is supported. In this example, I also use jQuery.

 if ( ! Modernizr.objectfit ) { $('.grid-image').each(function () { var $wrapper = $(this), imgUrl = $wrapper.find('img').prop('src'); if (imgUrl) { $wrapper .css('backgroundImage', 'url(' + imgUrl + ')') .addClass('compat-object-fit') .children('img').hide(); } }); }

Obviously, if any user wants to browse the web using software from the 20th century, he will receive a version of the 20th century website. This is similar to trying to watch 70 mm scenes from Interstellar (or any modern 16: 9 movie) in a 4: 3 TV program, you won't see all the features of the docking scene.

+3
source

Source: https://habr.com/ru/post/1234994/

More articles:


All Articles