Есть ли альтернатива свойству CSS background-size, которое работает на мобильных устройствах? - PullRequest
1 голос
/ 03 мая 2011

В CSS3 установка background-size на фоновом изображении кнопки растягивает его до высоты и ширины кнопки.

Есть ли альтернатива background-size, поскольку мои цели - мобильные устройства, а некоторыене поддерживаю это.Я не хочу указывать что-либо в px или em.

Ответы [ 4 ]

3 голосов
/ 03 мая 2011

См. http://css -tricks.com / perfect-full-page-background-image / - подробно описан способ сделать это без использования background-size.

0 голосов
/ 13 сентября 2014

Вы можете попробовать это для IE8.Мой проект был в MVC4, и я попробовал это и работал для меня (IE + Chrome)

div class="logoDiv">  </div>  

, а в css вы определяете свой класс как

.logoDiv {  
        max-width: 100%;
        height: 100px; /*(My Image height was 100px .....You please define yours)*/
        background: url("../Images/logo.jpg") no-repeat;
        background-size: cover; 
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../Images/.logo.jpg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../Images/logo.jpg', sizingMethod='scale')";   
    }
0 голосов
/ 03 мая 2011

Нет, нет.

Это новое свойство , введенное в CSS3.Многие браузеры уже знают это, но для тех, кто этого не знает, у вас есть два основных варианта:

  • Изящно ухудшить с чем-то вроде Modernizr .Я думаю, что это лучший и простой подход.
  • Используйте разные размеры изображений и выбирайте каждое из них в зависимости от размера кнопки (используя vanilla JavaScript, jQuery, Motools и т. Д.).
0 голосов
/ 03 мая 2011

Нет, не совсем.

Существует background-repeat, который берет одно фоновое изображение и повторяет его вдоль оси x и / или оси y. В зависимости от того, как вы хотите, чтобы ваша кнопка выглядела, это может сработать: см., Например, http://sophie -g.net / работа / CSS / e_buttons.htm

Но нет ничего, что имело бы такой же эффект, как background-size. Вот почему background-size был введен.

...