- 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 ...