Quiero colocar un div y dentro una imagen pero está última se desborda, cómo puedo hacer para que no se vea el contenido que se desborda del contenedor?
2 respuestas
Tomando el contenido de tu pregunta, especificamente el siguiente enunciado:
que no se vea el contenido que se desborda del contenedor
Puedes utilizar la propiedad css overflow
en el contenedor de tu imagen
.container {
width: 200px;
height: 200px;
}
.scroll {
overflow: scroll;
}
.hidden {
overflow: hidden;
}
<p>Overflow Scroll<p/>
<div class="container scroll">
<img width="400" height="400" src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" alt="js" />
</div>
<p>Overflow Hidden<p/>
<div class="container hidden">
<img width="400" height="400" src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" alt="js" />
</div>
Es facil al div asignale un ancho y un alto y a la imagen dale el width: 100% esto ara que la imagen siempre tome el tamaño del nodo padre.
<div style="width: 200px" >
<img width="100%" src="https://wallpapercave.com/wp/wp5191399.jpg" alt="js" />
</div>
Espero te haya servido. saludos
overflow:hidden;