La propiedad de cambiar el tamaño de la imagen se usa en la web receptiva donde la imagen cambia de tamaño automáticamente para ajustarse al contenedor div. La propiedad max-width en CSS se usa para crear una propiedad de imagen de cambio de tamaño. La propiedad de cambio de tamaño no funcionará si el ancho y el alto de la imagen están definidos en el HTML.
Sintaxis:
img {
max-width:100%;
height:auto;
}
El ancho también se puede usar en lugar del ancho máximo si lo desea. La clave es usar height:auto para anular cualquier atributo height=”…” ya presente en la imagen. Las propiedades CSS max-width y max-height funcionan muy bien, pero no son compatibles con muchos navegadores. Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>cell padding</title>
<style>
.gfg {
width:auto;
text-align:center;
padding:20px;
}
img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div class = "gfg">
<p id="my-image"><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-17.png">
</p>
</div>
</body>
</html>
Producción: 
Un uso común es establecer max-width: 100%; altura: automático; para que las imágenes grandes no excedan el ancho de sus contenedores. Otra forma es el uso de la propiedad de ajuste de objeto, esto se ajustará a la imagen, sin cambiar la proporción.
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>cell padding</title>
<style>
.gfg {
width:auto;
text-align:center;
padding:20px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class = "gfg">
<p id="my-image"><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-17.png">
</p>
</div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por shefali163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA