css - div content
Corrección de IE y Edge para ajuste de objeto: cubierta; (5)
Acabo de usar el @ misir-jafarov y ahora estoy trabajando con:
- IE 8,9,10,11 y detección EDGE
- utilizado en Bootrap 4
- tomar la altura de su div padre
- Se coloca verticalmente al 20% de la parte superior y horizontalmente al 50% (mejor para retratos)
Aquí está mi código:
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
jQuery(''.art-img img'').each(function(){
var t = jQuery(this),
s = ''url('' + t.attr(''src'') + '')'',
p = t.parent(),
d = jQuery(''<div></div>'');
p.append(d);
d.css({
''height'' : t.parent().css(''height''),
''background-size'' : ''cover'',
''background-repeat'' : ''no-repeat'',
''background-position'' : ''50% 20%'',
''background-image'' : s
});
t.hide();
});
}
Espero eso ayude.
Estoy usando
object-fit: cover;
en mi CSS para imágenes en una página específica, porque necesitan pegarse en la misma
height
.
Funciona muy bien en la mayoría de los navegadores.
Pero al escalar mi navegador en IE o Edge, la imagen cambia de tamaño en
width
(no en
height
) en lugar de hacer zoom.
La imagen se sale de forma.
¿Qué regla CSS puedo usar para arreglar esto?
Aqui esta la page
No hay una regla para lograr eso usando solo CSS, además del
object-fit
(que está usando actualmente), que tiene soporte parcial en EDGE
1,
por lo que si desea usar esto en IE, debe usar un
polyfill de ajuste de objeto
en caso de que quiera usar solo el elemento
img
, de lo contrario, debe hacer algunas soluciones.
Puedes ver el soporte de
object-fit
here
ACTUALIZACIÓN (2018)
1 - EDGE ahora tiene
soporte parcial
para
object-fit
de
object-fit
desde la versión 16, y por parcial, significa que solo funciona en el elemento
img
(la futura versión 18
todavía
solo tiene soporte parcial)
ACTUALIZACIÓN (2019)
Puede usar un fragmento JS simple para detectar si el
object-fit
es compatible y luego reemplazar el
img
por un
svg
//for browsers which doesn''t support object-fit (you can use babel to transpile to ES5)
if (''objectFit'' in document.documentElement.style === false) {
document.addEventListener(''DOMContentLoaded'', () => {
Array.prototype.forEach.call(document.querySelectorAll(''img[data-object-fit]''), image => {
(image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle[''object-fit''] : image.getAttribute(''data-object-fit'')}`
image.src = `data:image/svg+xml,%3Csvg xmlns=''http://www.w3.org/2000/svg'' width=''${image.width}'' height=''${image.height}''%3E%3C/svg%3E`
})
})
}
img {
display: inline-flex;
width: 175px;
height: 175px;
margin-right: 10px;
border: 1px solid red
}
/*for browsers which support object fit */
[data-object-fit=''cover''] {
object-fit: cover
}
[data-object-fit=''contain''] {
object-fit: contain
}
<img data-object-fit=''cover'' src=''//picsum.photos/1200/600'' />
<img data-object-fit=''contain'' src=''//picsum.photos/1200/600'' />
<img src=''//picsum.photos/1200/600'' />
Puedes usar este código js.
Simplemente cambie la
.post-thumb img
con su
img
.
$(''.post-thumb img'').each(function(){ // Note: {.post-thumb img} is css selector of the image tag
var t = $(this),
s = ''url('' + t.attr(''src'') + '')'',
p = t.parent(),
d = $(''<div></div>'');
t.hide();
p.append(d);
d.css({
''height'' : 260, // Note: You can change it for your needs
''background-size'' : ''cover'',
''background-repeat'' : ''no-repeat'',
''background-position'' : ''center'',
''background-image'' : s
});
});
Tuve un problema similar. Lo resolví solo con CSS .
Básicamente
Object-fit: cover
no funcionaba en IE y estaba tomando 100% de ancho y 100% de altura y la relación de aspecto estaba distorsionada.
En otras palabras, el efecto de zoom de la imagen no estaba allí, lo que estaba viendo en cromo.
El enfoque que tomé fue colocar la imagen dentro del contenedor con absoluta y luego colocarla justo en el centro usando la combinación:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Una vez que está en el centro, le doy a la imagen,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
Esto hace que la imagen tenga el efecto de Object-fit: cover.
Aquí hay una demostración de la lógica anterior.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Esta lógica funciona en todos los navegadores.
.row-fluid {
display: table;
}
.row-fluid .span6 {
display: table-cell;
vertical-align: top;
}
.vc_single_image-wrapper {
position: relative;
}
.vc_single_image-wrapper .image-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
<div class="vc_single_image-wrapper vc_box_border_grey">
<div class="image-wrapper" style="background-image: url(http://i0.wp.com/www.homedecor.nl/wp-content/uploads/2016/03/Gordijnen-Home-Decor-2.jpg?fit=952%2C480;"></div>
</div>
prueba esto, debería funcionar.
también quite el flotador de
.row-fluid .span6