1

Estoy desarrollando una web para una empresa, y en la pagina principal, cuenta con 4 imágenes que redireccionan a secciones diferentes. El problema es que estas imágenes tienen establecido un width de 15em, entonces todas se adaptan a esta medida y quedan de diferentes tamaños... Como puedo hacer que el contenedor principal flex, se adapte al ancho de cada una y queden todas con la misma proporción? Es de mucha ayuda cualquier tipo de información, desde ya muchas gracias!

HTML

<section id="icon-boxes" class="icon-boxes">
  
        <a href="aceitera.html"><div class="icon-box" id="icon-box">
          <div class="icon-box-image">
          <img src="assets/img/aceitera.png">
        </div>
      </div></a>

        <a href="ganaderia.html"><div class="icon-box" id="icon-box">
          <div class="icon-box-image">
          <img src="assets/img/ganaderia.png"> 
        </div>
      </div></a>
      
      <a href="ganaderia.html"><div class="icon-box" id="icon-box">
          <div class="icon-box-image">
          <img src="assets/img/agricultura.png">
        </div>  
        </div></a>
    
        <a href="arrendamientos.html"><div class="icon-box" id="icon-box">
          <div class="icon-box-image">
          <img src="assets/img/arrendamientos.png">
        </div>  
        </div></a>
  </div>
  </section>
</section>

CSS

#icon-boxes {
  padding-bottom: 0
}

#icon-boxes .icon-box {
  padding: 0;
  margin: 0px 15px;
}

#icon-box:hover {
transform: translateY(-20px);
}

#icon-box img {
  width: 15em;
}

#icon-box, .icon-box-image {
  display: inline-block;
}

.icon-boxes {
  padding-top: 20px;
  position: relative;
  z-index: 100;
}

.icon-boxes .icon-box {
  padding: 20px 50px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
}

introducir la descripción de la imagen aquí

deberia quedar algo parecido a eso: introducir la descripción de la imagen aquí

4
  • Buen día, podrías adjuntarnos también tu CSS? el 17 feb. 2023 a las 19:02
  • CSS agregado, desde ya muchas gracias por la ayuda cris! Espero poder solucionarlo juntos! el 17 feb. 2023 a las 19:40
  • Sucede que las imagenes no tienen la misma altura. Prueba con height: max-content o height: 100% a tus imágenes. Aunque te recomendaría que las imágenes tengan la misma altura para evitar estos problemas. el 17 feb. 2023 a las 19:55
  • Las imágenes tienen la misma altura, pero no son de igual ancho, lo qué pasa, es que flex, al dividir en 4 partes iguales me “encoje” la imagen más ancha. Si tenes en mente alguna otra solución, es bienvenida el 17 feb. 2023 a las 20:21

1 respuesta 1

0

Una simple solución es poner el contenedor de la imágen a una altura fija: por ejemplo 100px.

Luego las imágenes deben ser de un ancho libre con max-width: 100%, y height: 100%.

Si la altura del contenedor (icon-box-image) es fijo, por ejemplo 100px, entonces al darle un height: 100% a las imágenes ya sería suficiente obtener lo deseado.

            
*,:before,:after {
box-sizing: border-box
} html, body {
margin: 0;
padding: 0
} a {
text-decoration: none
} #icon-boxes { padding-bottom: 0 } #icon-boxes .icon-box { padding: 0; margin: 0px 15px; } #icon-box:hover { transform: translateY(-20px); } 

#icon-box, .icon-box-image {
display: inline-block;
height: 100px;
}

.icon-box-image {
position: relative;
max-width: 200px;
max-height: 100%
}

.icon-box-image img {
display: block;
max-width: 100%;
height: 100%;
}

.icon-boxes { padding-top: 20px; position: relative; z-index: 100; } .icon-boxes .icon-box { padding: 20px 50px; position: relative; overflow: hidden; transition: all 0.3s ease-in-out; border-radius: 10px; }

            
<section id="icon-boxes" class="icon-boxes"> 
        
        <a href="aceitera.html">
            
            <div class="icon-box" id="icon-box"> 
                
                <div class="icon-box-image"> 
                    
                    <img src="https://placeimg.com/150/200/people"> 
                    
                </div> 
            </div>
        </a> 
        
        <a href="ganaderia.html">
            
            <div class="icon-box" id="icon-box"> 
                
                <div class="icon-box-image"> 
                    
                    <img src="https://placeimg.com/500/200/animals"> 
                    
                </div> 
            </div>
        </a> 
        
        <a href="ganaderia.html">
            
            <div class="icon-box" id="icon-box"> 
                
                <div class="icon-box-image"> 
                    
                    <img src="https://placeimg.com/150/200/arch"> 
                    
                </div> 
            </div>
        </a> 
        
        <a href="arrendamientos.html">
            
            <div class="icon-box" id="icon-box"> 
                
                <div class="icon-box-image"> 
                    
                    <img src="https://placeimg.com/500/200/nature"> 
                    
                </div> 
            </div>
        </a>
    </div> 
</section>

            

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.