0

Tengo un <div> con flex-direction: column; en el que se muestran imágenes en el. Sin embargo cuando se empieza a acortar el ancho de la pantalla llega un momento que el ancho de las imágenes empieza a acortarse y verse mal.

¿Existe alguna manera para aplicar en css o bien en bootstrap (es lo que estoy usando), para que una vez que el ancho de la pantalla se empiece a acortar se impida que se reduzca el ancho de la imagen, y en vez de eso hacer que empiezen a aparecer en la siguiente fila?

.showcase-container img{
   width: 120px;
   height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <main>
      <div class="showcase-container d-flex flex-row">
       <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg" class="img-fluid" alt="Responsive image"></div>
      <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Plaza_Virgen_de_los_Reyes%2C_Seville%2C_Spain_-_Sep_2009.jpg/250px-Plaza_Virgen_de_los_Reyes%2C_Seville%2C_Spain_-_Sep_2009.jpg" class="img-fluid" alt="Responsive image"></div>
       <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg" class="img-fluid" alt="Responsive image"></div>
       
      <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Plaza_Virgen_de_los_Reyes%2C_Seville%2C_Spain_-_Sep_2009.jpg/250px-Plaza_Virgen_de_los_Reyes%2C_Seville%2C_Spain_-_Sep_2009.jpg" class="img-fluid" alt="Responsive image"></div>
       
     <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg" class="img-fluid" alt="Responsive image"></div>
        <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Plaza_Virgen_de_los_Reyes%2C_Seville%2C_Spain_-_Sep_2009.jpg/250px-Plaza_Virgen_de_los_Reyes%2C_Seville%2C_Spain_-_Sep_2009.jpg" class="img-fluid" alt="Responsive image"></div>
      </div>
      
      
    </div>
  </main>

¿Se puede hacer con flexbox o sería más apropiado usar CSS Grid?

2
  • Lo más apropiado sería usar Media Query, con esto le dices que cuando llegue a cierrta medida haga lo que tu le indiques dentro. Commented el 28 abr. 2020 a las 9:27
  • Entiendo, el problema es que con Media Query tendría que asumir manualmente y dependiendo de la anchura de la pantalla del usuario quizás me confunda. Sin embargo si pudiese indicarselo con el auto-responsive de bootstrap sería exacto. Commented el 28 abr. 2020 a las 9:29

1 respuesta 1

0

De momento he encontrado esta solución con CSS Grid que me sirve usando auto-fit, la dejo aquí pero si alguien sabe una solución sin tener que usar Css Grid bienvenido sea

.showcase-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

}

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.