Question 373955 in CSS Question posted in
Some basic documentation can be found here.

Css – Difficulty w/ getting a row of images to responsively resize when there is a change in viewport

I am having difficulty with getting a row of images to responsively resize with changes in viewport. I am finding that when the screen gets more narrow the images start wrapping, or there is an awkward white space, or they don’t change size (causing the user to have to scroll horizontally to see the images).
I want the row of images to responsively resize with viewport changes without wrapping or causing there to be spaces in between/adjacent to them (they should be border to border spanning the width of the screen).Wireframe representation of desired look

I will admit that I am new to web design/development (and first time posting on Stack OverFlow).

My Code

html, body, .row {
  height: 100%;
  max-height: 100%;
  width: 100%;
}
body {
  line-height: 1.75rem !important;
}
.container-fluid {
  padding: 0 !important;
  margin: 0 !important;
}
.about-imgs-item {
  height: 240px; 
  width: 245px; 
  display: flex;
  object-fit: cover;
  justify-content: start;
  flex-wrap: nowrap;
}
@media (max-width: 575px) {
  .about-imgs-item {
      display: none;
  }
}
<div class="container-fluid dev">
    <div class="row about-imgs">
        <div class="about-imgs-item">
            <img id="about-imgs-1" src="image1.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-2" src="image2.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-3" src="image3.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-4" src="image4.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-5" src="image5.jpg">
        </div>
    </div>
</div>

GitHub Link to code

I have tried using the following:

  • flex-wrap: nowrap;
  • rem instead of px for image dimension
  • media query for setting css specific to a screen size
  • removing the container

However, I will note that since I am still learning all of this, I might have not used these elements in the correct manner. Thanks!

Tags:

2

Answers


  1. 0

    You can just add display:flex; and flex-wrap:wrap; to the item container <div class="row about-imgs"> will remove horizontal scroll

    .about-imgs {
  display: flex;
  flex-wrap: wrap;
}
    Login or Signup to reply.
  2. 0

    Problem lies with hard-coding the image sizes.

    A better approach is to divide the container element into 5 equal columns:

    .about-imgs { 
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.about-imgs img {
  /* prevents gaps when the images 
     are too small to fill the row width
     Might produce pixelation if the images are enlarged too much!
   */
  width: 100%;
}

    and simplify the markup to:

    <div class="row">
  <div class="col about-imgs">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
    <img src="image5.jpg">
  </div>
</div>

    See it here.

    Note: I wrapped the row contents in .col to counter the negative margins applied by .row on certain screen sizes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search