0

I have 2 issue I am trying to solve.

So I have 5 <div> tags inside a parent that has a display: grid;

<section class="section2">
  <div class="box6"><img src="img/men-limited.jpg" alt="" /></div>
  <div class="box7"><img src="img/women-limited.jpg" alt="" /></div>
  <div class="box8"></div>
  <div class="box9"></div>
  <div class="box10"></div>
</section>

All my <div> tags are lined up next to each other, each <div> tag taking 20% of <body> width, height: 300px.

In each <div> tag, I added 5 different images.

In the CSS file for the images, I have written this code:

.section2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20%);
}

.box6 {
  background-color: lightsalmon;
  height: 350px;
}

.box6>img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.box7 {
  background-color: lightskyblue;
  height: 350px;
}

.box7>img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

So this fills the image in current size of the box.

But, this is the problem I am sitting with: When I stretch the size of the screen, the <div> boxes stays at the same height and becomes slimmer, which is great, but the images doesn't follow along, like it doesn't fill the whole height of the <div> box anymore. Here is a picture:

images when screen width is smaller

So the colors are the 5 <div> tags.

So, how do I make so that images keeps the <div> box filled when I stretch screen in and out?

I will add @media later so I get the <div> boxes wrapped.

The second question is:

The image is pretty large, and I want to target specific area of the image, lets say I wanna show the left side of the image instead of the center. How do I target a specific area of a large image I wanna show. Image is example 1000 x 1000 but the <div> box is 300 x 300, and I wanna target left side instead of center, or I wanna type in the exact pixel area I wanna show. How does that work?

TheCrafters001
  • 327
  • 2
  • 15
Danier Valiev
  • 25
  • 6

1 Answers1

0

You need to add height: 100% on the images.

.section2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20%);
}

.box6 {
  background-color: lightsalmon;

  height: 350px;
}

.box6 > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  height: 100%; //Added Code
}

.box7 {
  background-color: lightskyblue;
  height: 350px;
}

.box7 > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  height: 100%; //Added Code
}
<section class="section2">
        <div class="box6"><img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" alt="" /></div>
        <div class="box7"><img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="" /></div>
        <div class="box8"></div>
        <div class="box9"></div>
        <div class="box10"></div>
      </section>

As for the second part, I would suggest using background images instead of images and then adjust the background-position to the window you want to show.

Alia El Shennawy
  • 17
  • 1
  • Oh so adding height was the only thing missing haha, Thank you so much! – Danier Valiev Oct 25 '20 at 00:51
  • I'm suggesting to use background-images combined with background positions, This can help as well https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of-an-image-in-html-css. – Alia El Shennawy Oct 25 '20 at 00:53
  • The second one is that most of the pictures is going to have "a ref" tag, like most pictures are gonna be clickable. so that was why I was wondering if theres way to control what part of the image I can show in the div box – Danier Valiev Oct 25 '20 at 00:53
  • you just need to replace your `div` by `a` tags – MaxiGui Oct 25 '20 at 08:50