css Question posted in
Some basic documentation can be found here.

Css – How to make a picture responsive to the grid layout

I am making a react website and since I don’t have much experience with front-end developing I am still learning how the positioning exactly works, when to use vh/vw/%/px etc.

In the main page of my latest web application, I have made a grid layout followed by 5 rows (header, store-location image, filterbar, products, footer). I have this css for the image:

  .shopImage {
    height: auto; 
    width: 75%; 
    display: block; 
    position: relative;
    top: -30px; 
    left: 12.5%; 
    z-index: 1;
  }

The issue that I am facing is when the resolution width is different, the image resolution
also change leaving an unwanted gap between the image and the filterbar. Any suggestions how I can fix this with keeping the image’s good quality?

normal view /
smaller resolution

UPDATE:

Here is my HTML code as requested:

  <body>
    <div class="grid-container">
      <div id="header" class="grid-item item1"></div>
      <div class="imageContainer">
        <div id="image" class="grid-item item2">
    <img class="shopImage" src={shopImage} />
    </div>
      </div>
      <div id="filterMenu" class="grid-item item3">
    <div class="filterMenu">
            <ul className='filters'>
                <li><a>...</a></li>
                <li><a>ВСИЧКИ</a></li>
                <li><a>ГРИВНИ</a></li>
                <li><a>ОГЪРЛИЦИ</a></li>
                <li><a>ПРЪСТЕНИ</a></li>
                <li><a>ОБЕЦИ</a></li>
                <li>
                    <input type="text" className='filterSearchbar' id="filterSearchbar" />
                    <img class="SearchIcon" src={searchIcon} />
                </li>
            </ul>
        </div>
      </div>
      <div class="grid-item item4">3</div>
      <div class="grid-item item5">4</div>
  </div>
  </body>
</html>

and css:

  /* 

        GRID BOX AND BODY OF THE PAGE

  */

  body {
    max-width: 100%;
    height: 2500px;
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
}

.grid-container {
    display: grid;
    grid-template-rows: 0.1fr 1fr 0.1fr 4fr 0.2fr;
    gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
  
  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }
  
  .item1 {
    grid-row: 1 / 2;
    min-height: 70px;
    position: relative;
  }

  .item2 {
    grid-row: 2 / 3; 
    min-height: 400px;
    max-height: 700px;
  }

  .item3 {
    grid-row: 3 / 4;
    min-height: 70px;
    position: relative;
  }


  /* MAIN IMAGE SHOP */

  .imageContainer {
    width: 75%;
    margin: 0 auto; /* Center the container */
  }
  .shopImage {
    min-height: 100%;
    width: 100%; 
    display: block; /* Needed to apply margins to an image */
    position: relative;
    z-index: 1;
    top: -30px; 
  }


  /* FILTER MENU */

  .filterMenu {
    position: relative;
    width: 75%;
    height: 5vw;

    left: 12.5%; 
    top: -30px; 
    background-color: #2E0002;
    z-index: 99;
    
  }

  .filters {
    float: left;
    position: relative;
    list-style-type: none;
    width: 150%;
    left: -12.5%;
    overflow: hidden;
    transform: scale(0.8);
    
  }

  .filters li {
    display: inline;
    float: left;
    margin-right: 50px;
    text-align: center;
    margin: 0 4.9vw 0 0;
  }
  
  .filters li a {
    display: block;
    color: white;
    text-decoration: none;
    font-weight: 540;
    font-size: 1.6vw;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: relative;
  }

  .filters li:hover a {
    color: #FFC700;
  }

  .filterSearchbar {
    width: 90%;
    font-size: 24pt;
    position: relative;
    left: -1.5vw;
    top: 0.1vw;
    border-radius: 30px;
  }

  .SearchIcon {
    position: absolute;
    left: 75.8%;
    top: -11.2%;
  }
Tags:

2

Answers


  1. 0

    To make your image responsive and maintain its quality while avoiding unwanted gaps, you can use the max-width property along with a percentage value. This will ensure that the image doesn’t exceed a certain width while maintaining its aspect ratio.

    Here’s an updated CSS code for your .shopImage class:

    .shopImage {
  max-width: 100%;
  height: auto; 
  display: block; 
  position: relative;
  top: -30px; 
  left: 12.5%; 
  z-index: 1;
}

    In this code, max-width: 100% ensures that the image’s width won’t exceed the width of its container. This way, as the resolution changes, the image will scale down proportionally, preventing any unwanted gaps between the image and the filter bar.

    Additionally, you might want to consider using a container div around the image to better control its positioning and ensure responsiveness. Here’s an example:

    .imageContainer {
  width: 75%;
  margin: 0 auto; /* Center the container */
}

.shopImage {
  max-width: 100%;
  height: auto; 
  display: block; 
  position: relative;
  top: -30px; 
  z-index: 1;
}

    And in your HTML:

    <div class="imageContainer">
  <img class="shopImage" src="your-image-source.jpg" alt="Shop Image">
</div>

    This container will center your image and provide a more consistent and controlled layout, regardless of the screen resolution. Adjust the percentage values according to your design requirements.

    Login or Signup to reply.
  2. 0

    You don’t need a height value for your body element. This breaks the natural behavior of HTML. You use overuse the position: relative; declaration. You also don’t need the min-height: 100%; declaration for your image. You use these properties incorrectly and that’s why your code doesn’t behave as expected. If you don’t have explicit values for your grid template, you can use flexbox to organize your elements. Don’t break the natural responsive behavior of HTML by giving elements too many CSS styles.

    You can use this ruleset for your images:

    img {
display: block;
max-width: 100%;
margin: 0;
}

    For your flex container:

    display: flex;
flex-direction: row;
flex-wrap: wrap;
}

    You can check this little demo to see what I’m talking about…

    *,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
}

article {
  display: flex;
  flex-direction: column;
  max-inline-size: 600px;
}

.image-area {
  background-color: blue;
}

img {
  display: block;
  max-inline-size: 100%;
}

.menu-area {
  background-color: green;
}

ul {
  display: flex;
  flex-flow: row wrap;
  padding: unset;
  list-style-type: none;
  gap: 1rem;
}

a:link,
a:visited {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding: 0.5rem;
  background-color: brown;
}

a:hover,
a:active {
  opacity: 0.5;
  transition: all 0.2s;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <main>
    <article>
      <div class="image-area">
        <img
          src="https://images.unsplash.com/photo-1580654843061-8c90a9585fec?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="The shop image">
      </div>
      <div class="menu-area">
        <ul>
          <li><a href="#">ВСИЧКИ</a></li>
          <li><a href="#">ГРИВНИ</a></li>
          <li><a href="#">ОГЪРЛИЦИ</a></li>
          <li><a href="#">ПРЪСТЕНИ</a></li>
          <li><a href="#">ОБЕЦИ</a></li>
        </ul>
      </div>
    </article>
  </main>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search