Фоновый размер IE7 & 8 CSS hack

Question

Я знаю, что размер фона не поддерживается для IE7 и IE8. Я также знаю, что есть решение с использованием AlphaImageLoader, как показано ниже:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.gif', sizingMethod='scale'); 

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='image.gif', sizingMethod='scale')"; 

Но, к сожалению, его не работает. Какие-либо предложения?

Вот мой код в CSS:

.useBGImage { 
    background-image: url('../img/BGImage.gif'); 
    background-size: 400px 50px; 
    background-repeat: no-repeat; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='../img/BGImage.gif', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
       src='../img/BGImage.gif', sizingMethod='scale')"; 
} 

Оригинальный размер изображения 400px * 70px.

Answer 1

Мое предложение было бы использовать одну из доступных библиотек полиполков, чтобы решить эту проблему.

Есть два, что я могу думать, который будет отвечать всем требованиям:

• CSS3Pie
• https://github.com/louisremi/background-size-polyfill

Из них, CSS3Pie покрывает нагрузки больше функциональных возможностей, чем просто background-size, так бы будьте хороши, если вы также используете аналогичные стили filter для градиентов и т. д. Другой - однопоточный полиполк для этой конкретной функции.

Как известно, хорошо работают, поэтому выбирайте то, что вы предпочитаете, и выбрасывайте эти уродливые стили filter.

Answer 2

Согласно собственной документации Microsoft, sizingMethod='scale'

Scale
                    растягивает или сжимает изображение, чтобы заполнить границы объекта.

Как вы можете видеть масштаб плохой выбор слов, чтобы использовать, так как он на самом деле не «масштаб» она просто растягивается и/или уменьшает изображение, чтобы соответствовать границы контейнера.

Чтобы эффективно масштабировать изображение пропорционально, рекомендуется удалить высоту и ширину изображения в разметке HTML.

Затем используйте это в качестве CSS ...

.useBGImage { 
    background-image: url('../img/BGImage.gif'); 
    background-repeat: no-repeat; 
    width: auto; /* required for IE8 */ 
    max-width: 100%; 
    height: auto; 
} 

Счастливый кодирования!