Хорошие "background-size: cover" отступления / шиммы / хитрости для кросс-браузерной совместимости на DIVs? - PullRequest
Новая
       44

Хорошие "background-size: cover" отступления / шиммы / хитрости для кросс-браузерной совместимости на DIVs?

5 голосов
/ 17 февраля 2012

Поэтому я использую background-size:cover для достижения желаемого эффекта фонового изображения, которое масштабируется до любого размера деления, к которому оно применяется, при сохранении соотношения сторон. Зачем использовать этот метод? Изображение применяется в качестве фона с помощью встроенного CSS, динамически через PHP, в зависимости от того, что установлено в качестве изображения в соответствующем сообщении WordPress.

Так что все прекрасно работает, но есть ли запасной вариант, чтобы гарантировать, что это будет работать по крайней мере в IE8? Возможно некоторые исправления Javascript?

Уже пробовал backstretch и с увеличенным размером , но безрезультатно, поскольку они применяют изображения только к фону страницы.

Вы можете увидеть это в действии здесь .

Ответы [ 4 ]

7 голосов
/ 14 марта 2012

В IE8 или ниже, изображение переднего плана, вставленное как дочерний элемент div с определенной шириной / высотой, будет единственным обходным решением: 

<!doctype html>
<html lang="en">
<head>
    <title>Dynamic Image Sizing</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left; }
#pseudobg { position:absolute; z-index:1; width:100%; height:100%; }
#scroller { position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; }
#dyndiv { position: absolute; left: 50%; width: 200px; height: 300px; }
</style>
</head>
<body>

<div id="scroller">
  <!-- Insert your content here -->
  <div id="dyndiv">
    <img id="pseudobg" src="http://www.stackoverflow.com/favicon.ico" alt="" title="" />
  </div>
</div>
</body>
</html>

Если это не эквивалентно, спросите Stu Nicholls для получения дополнительной помощи.

Демо:

enter image description here

1 голос
/ 17 сентября 2013

Если вам нужно уменьшить размер изображения, а не увеличить его, этот подход не работает.Лучший подход, который я нашел, избегая Javascript - это наложить два изображения друг на друга, при наведении курсора сделать верхний прозрачным.Все остальные подходы, связанные с изменением размера оригиналов (например, background-size), в IE не работают.

CSS: 

.social-btn-container {
    width:46px;
    height:46px;
    position:relative;
    float: left;
    margin-right: 15px;
}   
.social-btn-container:hover > .top-btn {
    visibility:hidden;
}
.social-btn {
    margin:0;
    padding:0;
    border:0;
    width: 46px;
    height: 46px;
    position: absolute;
    left:0;
    top:0;
}   
.top-btn {
    z-index: 1;
}
.top-btn:hover {
    opacity: 0;
}

HTML: 

<div class="social-btn-container">
    <a href="http://www.facebook.com/comunidadintiwarayassi" target="_blank" title="follow us on facebook">
        <img src="images/icons/facebook_top.png" class="top-btn social-btn" />
        <img src="images/icons/facebook_bottom.png" class="social-btn" />
    </a>
</div>

The .social-btn-container:hover > .top-btn part заставляет это работать в режиме IE quirks, который, кажется, не поддерживает opacity, и если вы используете :hover{visibility:hidden}, hover становится ложным, когда видимость становится скрытой, вызывая мерцание.(Внешний div также размещает изображения.) Я проверил это в FF23, стандартах IE и причудах (заставляя IE 10 эмулировать 7, 8 и 9), Opera и Safari.

1 голос
/ 08 мая 2013

Я пробовал ответить раньше, и он не работал как background-size: cover;Ожидается, что оно действительно вписало изображение в выбранный размер, но оно не обрезало избыток до новых мер, что я и ожидал от опции «обложка».Мое решение было найдено здесь: http://selectivizr.com/

<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="[JS library]"></script>
 <!--[if (gte IE 6)&(lte IE 8)]>
   <script type="text/javascript" src="path/to/selectivizr.js"></script>
   <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
 <![endif]--> 

<style>
  .with-bg-size


    {
        background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
        background-position: center;
        /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img1.jurko.net/wall/paper/donald_duck_4.jpg',sizingMethod='scale'); 
it didnt work as cover is expected */
        width: 200px;
        height: 100px;


        /* Make the background image cover the area of the <div>, and clip the excess */
        background-size: cover;

      }


    </style>
    <body>

<div class="with-bg-size">Donald Duck!</div>

</body>
</html>
0 голосов
/ 10 января 2017

В IE8 или ниже используйте отдельный код background::

-webkit Пример: 

background: url('img/habesha.jpg') no-repeat center center;
-webkit-background-size: cover;

- в IE попробуйте: 

background-image:url('img/bright_switch.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% 100%;

Подробнее здесь: https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx

...