html - imagen - img cover css
¿Hay un equivalente a background-size: cover y contain para elementos de imagen? (13)
Tengo un sitio con muchas páginas y diferentes imágenes de fondo, y las visualizo desde CSS como:
body.page-8 {
background: url("../img/pic.jpg") no-repeat scroll center top #000;
background-size: cover;
}
Sin embargo, quiero mostrar diferentes imágenes (pantalla completa) en una página usando elementos <img> , y quiero que tengan las mismas propiedades que la background-image: cover; anterior background-image: cover; propiedad (las imágenes no pueden mostrarse desde CSS, deben mostrarse desde el documento HTML).
Normalmente uso:
div.mydiv img {
width: 100%;
}
O:
div.mydiv img {
width: auto;
}
para hacer que la imagen sea completa y receptiva. Sin embargo, la imagen se contrae demasiado (ancho: 100%) cuando la pantalla se vuelve más estrecha y muestra el color de fondo del cuerpo en la pantalla inferior. El otro método, width: auto; , solo hace que la imagen tenga el tamaño completo y no responde al tamaño de la pantalla.
¿Hay alguna manera de mostrar la imagen de la misma manera que background-size: cover ?
Solución n. ° 1: la nueva propiedad de ajuste de objeto ( todavía no hay soporte de IE )
Solo establece object-fit: cover; en el img.
body {
margin: 0;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
<img src="http://lorempixel.com/1500/1000" />
Puede leer más sobre esta nueva propiedad en este artículo de plataforma web .
Del artículo anterior - con respecto al valor de ''cobertura'':
Toda la imagen se reduce o se expande hasta que llena la caja por completo, se mantiene la relación de aspecto. Esto normalmente da como resultado que solo una parte de la imagen sea visible.
Además, aquí hay un violín del artículo anterior que muestra todos los valores de la propiedad de object-fit .
Solución # 2 - Reemplazar el img con una imagen de fondo con css
body {
margin: 0;
}
img {
position: fixed;
width: 0;
height: 0;
padding: 50vh 50vw;
background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
background-size: cover;
}
<img src="http://placehold.it/1500x1000" />
Con CSS puede simular object-fit: [cover|contain]; . Es use transform y [max|min]-[width|height] . No es perfecto Eso no funciona en un caso: si la imagen es más ancha y más corta que el contenedor.
.img-ctr{
background: red;/*visible only in contain mode*/
border: 1px solid black;
height: 300px;
width: 600px;
overflow: hidden;
position: relative;
display: block;
}
.img{
display: block;
/*contain:*/
/*max-height: 100%;
max-width: 100%;*/
/*--*/
/*cover (not work for images wider and shorter than the container):*/
min-height: 100%;
width: 100%;
/*--*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>
En realidad, hay una solución CSS bastante simple que incluso funciona en IE8:
.container {
position: relative;
overflow: hidden;
/* Width and height can be anything. */
width: 50vw;
height: 50vh;
}
img {
position: absolute;
/* Position the image in the middle of its container. */
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
/* The following values determine the exact image behaviour. */
/* You can simulate background-size: cover/contain/etc.
by changing between min/max/standard width/height values.
These values simulate background-size: cover
*/
min-width: 100%;
min-height: 100%;
}
<div class="container">
<img src="http://placehold.it/200x200" alt="" />
</div>
Intente configurar tanto min-height como min-width , con display:block :
img {
display:block;
min-height:100%;
min-width:100%;
}
( fiddle )
Siempre que el elemento que contiene su imagen sea la position:relative o position:absolute , la imagen cubrirá el contenedor. Sin embargo, no estará centrado.
Puede centrar fácilmente la imagen si sabe si se desbordará horizontalmente (establezca margin-left:-50% ) o verticalmente (configure margin-top:-50% ). Es posible utilizar consultas de medios de CSS (y algunas matemáticas) para resolverlo.
Lo que podría hacer es usar el atributo ''estilo'' para agregar la imagen de fondo al elemento, de esa manera seguirá llamando a la imagen en el HTML, pero aún podrá usar el comportamiento background-size: cover css:
HTML:
<div class="image-div" style="background-image:url(yourimage.jpg)">
</div>
CSS:
.image-div{
background-size: cover;
}
Así es como agrego el comportamiento de portada del tamaño de fondo a los elementos que necesito cargar dinámicamente en HTML. A continuación, puede utilizar clases css increíbles como background-position: center. auge
Necesitaba emular background-size: contain , pero no podía usar object-fit debido a la falta de soporte. Mis imágenes tenían contenedores con dimensiones definidas y esto terminó funcionando para mí:
.image-container {
height: 200px;
width: 200px;
overflow: hidden;
background-color: rebeccapurple;
border: 1px solid yellow;
position: relative;
}
.image {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<!-- wide -->
<div class="image-container">
<img class="image" src="http://placehold.it/300x100">
</div>
<!-- tall -->
<div class="image-container">
<img class="image" src="http://placehold.it/100x300">
</div>
No puedo ''agregar un comentario'' haciendo esto, pero sí lo que hizo Eru Penkman es bastante acertado, para tenerlo como fondo, todo lo que necesitas hacer es cambiar
.tall-img{
margin-top:-50%;
width:100%;
}
.wide-img{
margin-left:-50%;
height:100%;
}
A
.wide-img{
margin-left:-42%;
height:100%;
}
.tall-img{
margin-top:-42%;
width:100%;
}
Para IE también necesita incluir la segunda línea - ancho: 100%;
.mydiv img {
max-width: 100%;
width: 100%;
}
Podemos tomar el enfoque ZOOM. Podemos suponer que un máximo de 30% (o más hasta 100%) puede ser el efecto de acercamiento si la altura o el ancho de la imagen del aspecto es menor que la altura o el ancho deseado. Podemos ocultar el área de descanso no necesario con desbordamiento: oculto.
.image-container {
width: 200px;
height: 150px;
overflow: hidden;
}
.stage-image-gallery a img {
max-height: 130%;
max-width: 130%;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Esto ajustará las imágenes con diferente ancho O altura.
Sé que esto es antiguo, sin embargo, muchas de las soluciones que veo arriba tienen un problema con la imagen / video que es demasiado grande para el contenedor, por lo que en realidad no actúa como una tapa de tamaño de fondo. Sin embargo, decidí hacer "clases de utilidad" para que funcionaran para imágenes y videos. Simplemente le das al contenedor la clase .media-cover-wrapper y el elemento multimedia en sí la clase .media-cover
Entonces tienes el siguiente jQuery:
function adjustDimensions(item, minW, minH, maxW, maxH) {
item.css({
minWidth: minW,
minHeight: minH,
maxWidth: maxW,
maxHeight: maxH
});
} // end function adjustDimensions
function mediaCoverBounds() {
var mediaCover = $(''.media-cover'');
mediaCover.each(function() {
adjustDimensions($(this), '''', '''', '''', '''');
var mediaWrapper = $(this).parent();
var mediaWrapperWidth = mediaWrapper.width();
var mediaWrapperHeight = mediaWrapper.height();
var mediaCoverWidth = $(this).width();
var mediaCoverHeight = $(this).height();
var maxCoverWidth;
var maxCoverHeight;
if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {
if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
maxCoverWidth = '''';
maxCoverHeight = ''100%'';
} else {
maxCoverWidth = ''100%'';
maxCoverHeight = '''';
} // end if
adjustDimensions($(this), '''', '''', maxCoverWidth, maxCoverHeight);
} else {
adjustDimensions($(this), ''100%'', ''100%'', '''', '''');
} // end if
}); // end mediaCover.each
} // end function mediaCoverBounds
Cuando lo llame asegúrese de ocuparse del redimensionamiento de la página:
mediaCoverBounds();
$(window).on(''resize'', function(){
mediaCoverBounds();
});
Luego el siguiente CSS:
.media-cover-wrapper {
position: relative;
overflow: hidden;
}
.media-cover-wrapper .media-cover {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Sí, puede requerir jQuery pero responde bastante bien y actúa exactamente como background-size: cover y puedes usarlo en imágenes y / o videos para obtener ese valor extra de SEO.
Suponiendo que pueda hacer arreglos para tener un elemento contenedor que desea llenar, parece que funciona, pero se siente un poco hackish. En esencia, solo uso min/max-width/height en un área más grande y luego escalo el área de nuevo a las dimensiones originales.
.container {
width: 800px;
height: 300px;
border: 1px solid black;
overflow:hidden;
position:relative;
}
.container.contain img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
max-width: 10%;
max-height: 10%;
-webkit-transform:scale(10);
transform: scale(10);
}
.container.cover img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
min-width: 1000%;
min-height: 1000%;
-webkit-transform:scale(0.1);
transform: scale(0.1);
}
<h1>contain</h1>
<div class="container contain">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
<h1>cover</h1>
<div class="container cover">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
No , no puedes conseguirlo como background-size:cover pero ...
Este enfoque es bastante cercano: usa JavaScript para determinar si la imagen es horizontal o vertical, y aplica estilos en consecuencia.
JS
$(''.myImages img'').load(function(){
var height = $(this).height();
var width = $(this).width();
console.log(''widthandheight:'',width,height);
if(width>height){
$(this).addClass(''wide-img'');
}else{
$(this).addClass(''tall-img'');
}
});
CSS
.tall-img{
margin-top:-50%;
width:100%;
}
.wide-img{
margin-left:-50%;
height:100%;
}
background:url(''/image/url/'') right top scroll;
background-size: auto 100%;
min-height:100%;
encontró los mismos symptops exactos. arriba funcionó para mí.