Puede reducir fácilmente una imagen utilizando la propiedad flex-wrap en CSS y especifica si los elementos flexibles se fuerzan en una sola línea o se ajustan en varias líneas. La propiedad flex-wrap permite habilitar la dirección de control en la que se apilan las líneas. Se utiliza para designar un formato de una sola línea o de varias líneas para flexionar elementos dentro del contenedor flexible.
Sintaxis:
flex-wrap: wrap
Nota: el ajuste se usa para dividir el elemento flexible en varias líneas. Hace que los elementos flexibles se ajusten a varias líneas según el ancho del elemento flexible.
Ejemplo: para reducir la imagen, debe hacer que el ancho de la imagen sea del 100 %, de modo que la imagen ocupe el 100 % del tamaño del <div> .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
background-color: grey;
}
img {
width: 100%;
}
div {
flex: 1;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
</div>
</body>
</html>
Producción:
propiedad de envoltura flexible
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA