<!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
3 respuestas
Puedes probar el código:
img {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.d1 {
background-color: green;
width: 300px;
height: 100px;
}
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.
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].