Хороший "размер фона: обложка" резервные/прокладки/трюки для совместимости с кросс-браузерами на DIV?

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

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

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

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

Ответы

Ответ 1

В 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

Ответ 2

Я пробовал ответ раньше, и он не работал как фоновый размер: обложка; ожидается, что он действительно соответствовал изображению в выбранный размер, но он не обрезал избыток новых мер, которые я ожидал от опции "обложка". Мое решение было найдено здесь: 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>

Ответ 3

Если вам нужно уменьшить размер вашего изображения, а не расти, этот подход не работает. Лучший подход, который я нашел, избегая 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>

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

Ответ 4

В 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