css - div content

Corrección de IE y Edge para ajuste de objeto: cubierta;

Question

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

Answer 1

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.

Answer 2

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'' />

Answer 3

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
    });
});

Answer 4

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.

Answer 5

.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