<!DOCTYPE html>
<html>
<head>
<style>
img {
    max-width: 100%;
}
.d1 {
    background-color: green;
    padding: 5px;
    width: 300px;
    height: 100px;
}
</style>
</head>
<body>

<div class="d1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

</body>
</html>

Utilizo el código simple anterior para mostrar una imagen dentro de un div de un tamaño específico, pero la imagen no se ajusta al div y se desborda en la parte inferior ... ¿Cómo puedo solucionar esto? Ty

0
darkchampionz 15 oct. 2019 a las 05:29

3 respuestas

La mejor respuesta

Puedes probar el código:

img {
    width: 100%;
    height: 100%;
}
0
Ryan Nghiem 15 oct. 2019 a las 02:33
img {
    width: 100%;
    height: 100%;
}
.d1 {
    background-color: green;
    width: 300px;
    height: 100px;
}
0
user12217822 15 oct. 2019 a las 02:40
img {
     width: 100%;
     height:100%;
}
.d1 {
    background-color: green;
    padding: 5px;
    width: 300px;
    height: 300px;
}

Al hacer que el ancho y la altura de la imagen sean del 100%, se configuró de acuerdo con el ajuste del tamaño div, por lo que aquí he cambiado la altura div para que se vea bien, pero puede configurarlo de acuerdo con usted.

0
Purvi Barot 15 oct. 2019 a las 04:31