Сделать объект посадки и объект-положение работы в Internet Explorer

Question

У меня есть это в моем файле CSS:

.apiscar1 { 
    object-fit: none; 
    object-position: -354px 0; 
    width: 85px; 
    height: 155px; 
} 
.apiscar2 { 
    object-fit: none; 
    object-position: -189px 0; 
    width: 155px;  
    height: 155px; 
} 

И я называю sprite.png IMG SRC на моей странице WordPress. Это прекрасно работает для большого количества изображений, помещенных в sprites.png, но это не работает в IE. Как заставить его работать в IE?

Answer 1

Объектно-ориентированные и объектные позиции не поддерживаются в IE/Edge.

Answer 2

Я использую обходной путь, где я установить изображение в качестве фона на элементе, фон-размер может быть использован в качестве замены для объекта подгонки и фоном позиции для объекта-позиции

Вот jsfiddle с вашим пример. https://jsfiddle.net/124f0hve/

.apiscar1 { 
    background-image: url("http://lorempixel.com/400/200/"); 
    background-size: cover; 
    background-position: -354px 0; 
    width: 85px; 
    height: 155px; 
} 
.apiscar2 { 
    background-image: url("http://lorempixel.com/400/200/sports/"); 
    background-size: cover; 
    background-position: -189px 0; 
    width: 155px;  
    height: 155px; 
} 

Я использовал lorempixel изображения, вы получаете случайные изображения при каждом изменении. Если вы посмотрите в сети, вы увидите полное изображение, которое было выбрано, и на экране отобразится только его часть. Надеюсь, это поможет.