Estoy tratando de poner algunos logotipos en una fila y un div envuelve cada logotipo, el problema es que cuando doy un ancho específico a todos los divs de envoltura de logotipo, algunos se vuelven pequeños y viceversa (sé que es debido a la dimensión de los registros {Imágenes}) Pero, ¿hay alguna manera de que podamos hacer que todos los logotipos se vean incluso en una sola propiedad CSS?
Espero poder aclarar la pregunta.
¡Cualquier ayuda es muy apreciada!
.logos-container{ background: #ddd; } .logos-container .client-logo{ width: 120px; } .logos-container .client-logo img{ width: 100%; } <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3"> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt=""> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>Use ajuste de objeto para permitir que el navegador calcule la relación de escala contenedora para el tamaño de los datos de la imagen:
.client-logo img { display: block; width: 100%; height: 120px; object-fit: contain; } o use cover en lugar de contain si desea que las imágenes encajen perfectamente sin espacios en blanco.
Solo dale una altura específica a las imágenes. No podemos aplicar el mismo ancho debido a los diferentes tamaños de los logotipos, así que sea 100%.
.logos-container .client-logo img{ height:50px; width: 100%; }Establecer una altura en lugar de un ancho:
.logos-container{ background: #ddd; } .logos-container .client-logo img{ height: 80px; width: auto; } <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3"> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt=""> </div> <div class="client-logo"> <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt=""> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>