Si estamos usando una imagen como elemento secundario y queremos establecer la altura y el ancho en porcentaje, debemos establecer el elemento principal con un tamaño fijo.
Enfoque 1:
- Aquí usaremos CSS dentro de las etiquetas que también se conocen como CSS en línea .
- Para el div principal, le daremos un tamaño fijo dando altura: 500px y ancho: 40% según el tamaño de la pantalla, y le daremos color de fondo y borde para que el elemento principal sea claramente visible.
- Ahora, para la imagen secundaria, le daremos ancho: 60% y alto: 70%.
HTML
<!DOCTYPE html> <html> <body> <div style="height: 500px; width: 40%; background-color: red; border-color: green; border-style: dashed;"> <img src="gfg-2.png" alt="GFG" style="width: 60%; height: 70%"> </div> </body> </html>
Producción:
Enfoque 2:
- Aquí escribiremos el CSS en la etiqueta de estilo, también conocida como CSS en línea.
- Ahora le daremos al padre un tamaño fijo dándole altura: 500px y ancho: 40% y para definir claramente al padre le daremos border-color y background-color.
- Finalmente, le daremos a la imagen ancho: 50% y alto: 45% .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* giving parent fix size */
div {
height: 500px;
width: 40%;
background-color: blue;
border-color: black;
border-style: dashed;
}
/* child having size in % */
img {
width: 50%;
height: 45%;
}
</style>
</head>
<body>
<div>
<img src="gfg-2.png" alt="GFG">
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatagrawal5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA