Buena "base de datos: cubrir" las copias de seguridad/cuñas/trucos para la compatibilidad entre navegadores en DIVs?

Así que estoy usando background-size:cover para lograr el efecto deseado de una imagen de fondo que se adapta a cualquier tamaño del div al que se aplica manteniendo la relación de aspecto. ¿Por qué usar este método? La imagen se está aplicando como fondo con CSS en línea, dinámicamente a través de PHP, en función de lo que se establece como la imagen en la publicación correlativa de WordPress.Buena "base de datos: cubrir" las copias de seguridad/cuñas/trucos para la compatibilidad entre navegadores en DIVs?

Por lo tanto, todo funciona muy bien, pero ¿hay alguna alternativa para garantizar que funcione al menos en IE8? Posiblemente algunas correcciones de Javascript?

Ya intenté backstretch y supersized, pero fue en vano, ya que aplican las imágenes solo al fondo de la página.

Puedes verlo en acción over here.

Fuente

2012-02-17 Angel Marino

En IE8 o por debajo, una imagen en primer plano insertado como el hijo de un div con la anchura/altura definida sería la única solución:

<!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>

Si eso no es equivalente, piden Stu Nicholls para obtener más ayuda.

Demostración:

enter image description here

Fuente

2012-03-13 22:20:44

que he probado la respuesta antes y no funcionó como fondo de tamaño: la cubierta; se espera, de hecho encajó la imagen en el tamaño elegido, pero no recortó el exceso a las nuevas medidas, que es lo que esperaba de la opción "cubrir". fue encontrado mi solución aquí: 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>

Fuente

2013-05-08 13:12:20 Sultanos

Si necesita reducir el tamaño de la imagen, en lugar de hacerlo crecer, este enfoque no funciona. El mejor enfoque que he encontrado para evitar Javascript es superponer dos imágenes una encima de la otra, al desplazarlas, haz que la superior sea transparente. Todos los demás enfoques que implican cambiar el tamaño de los originales (p. Ej., background-size) parecen fallar en 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>

La parte .social-btn-container:hover > .top-btn se esta trabajando en modo de IE, lo que no parece apoyar opacity peculiaridades, y si se utiliza :hover{visibility:hidden} vuelo estacionario se convierte en falsa cuando la visibilidad se oculta, causando parpadeo. (El div externo también posiciona las imágenes.) He probado esto en FF23, estándares y peculiaridades de IE (obteniendo IE 10 para emular 7, 8 y 9), Opera y Safari.

Fuente

2013-09-16 20:51:57 Chris

En IE8 o por debajo de uso separados el código background::

-webkit Ejemplo:

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

- en IE intentar:

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

Más detalles aquí: https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx

Fuente

2017-01-10 13:14:58

Buena "base de datos: cubrir" las copias de seguridad/cuñas/trucos para la compatibilidad entre navegadores en DIVs?

Respuesta

Cuestiones relacionadas