Código de CSS - Cambia el ajuste y la posición de una imagen dentro de su contenedor

Imágen de perfil
Val: 96
Bronce
Ha aumentado su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Cambia el ajuste y la posición de una imagen dentro de su contenedorgráfica de visualizaciones


CSS

Publicado el 15 de Febrero del 2020 por Katas
200 visualizaciones desde el 15 de Febrero del 2020
Cambia el ajuste y la posición de una imagen dentro de su contenedor mientras conserva su relación de aspecto. Anteriormente solo era posible usar una imagen de fondo y la propiedad de tamaño de fondo.

object-fit

1

Publicado el 15 de Febrero del 2020gráfica de visualizaciones de la versión: 1
201 visualizaciones desde el 15 de Febrero del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="es">
 
<head>
    <style>
    .image {
        background: #34495e;
        border: 1px solid #34495e;
        width: 200px;
        height: 200px;
    }
 
    .image-contain {
        object-fit: contain;
        object-position: center;
    }
 
    .image-cover {
        object-fit: cover;
        object-position: right top;
    }
    </style>
</head>
 
<body>
 
    <img class="image image-contain" src="https://picsum.photos/600/200" />
    <img class="image image-cover" src="https://picsum.photos/600/200" />
 
</body>
</html>



Comentarios sobre la versión: 1 (0)


No hay comentarios
 

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5920