CSS: permite que la imagen se ajuste al div de un tamaño específico

Question

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

html css image

0

darkchampionz 15 oct. 2019 a las 05:29

Answer 1

Puedes probar el código:

img {
    width: 100%;
    height: 100%;
}

0

Ryan Nghiem 15 oct. 2019 a las 02:33

Answer 2

img {
    width: 100%;
    height: 100%;
}
.d1 {
    background-color: green;
    width: 300px;
    height: 100px;
}

0

user12217822 15 oct. 2019 a las 02:40

Answer 3

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

CSS: permite que la imagen se ajuste al div de un tamaño específico

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html