1
  • Buenas, como seguramente ya sepa, cuando se aplica object-fit : contain sobre una imagen en css, esta imagen mantendra la resolucion de la imagen original pero adaptando su sizing al tamaño del contenedor. Yo necesito que el tamaño del contenedor sea igual al tamaño de la imagen visible, de modo que si hago eso ...

#manzana{
    object-fit: contain;
    box-shadow: 0px 0px 10px #000;
    width : 30vw;
    height : 30vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <img src="https://img.freepik.com/vector-gratis/ilustracion-icono-dibujos-animados-fruta-manzana-concepto-icono-fruta-alimentos-aislado-estilo-dibujos-animados-plana_138676-2922.jpg?w=2000" id="manzana" alt="no se ha encontrado la imagen ...">

</body>
</html>

El box-shadow se aplique sobre la imagen como tal y no se visualice ese fondo blanco ...

1 respuesta 1

1

Elimina el width

#manzana{
    object-fit: contain;
    box-shadow: 0px 0px 10px #000;
    
    height : 30vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <img src="https://img.freepik.com/vector-gratis/ilustracion-icono-dibujos-animados-fruta-manzana-concepto-icono-fruta-alimentos-aislado-estilo-dibujos-animados-plana_138676-2922.jpg?w=2000" id="manzana" alt="no se ha encontrado la imagen ...">

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.