How to fit a picture in its figure tag?-CodePudding

For a project, I need to create the following layout. I managed to create it, but I have some problem with my pictures. I can't make them fit inside their respective figure tag. Here, I would like the image to re-size itself together when my screen size increase and/or decrease. And to do that, the biggest problem lays in their width.

At first, I tried to apply % on the width of .activity-picture, so it could create the responsive design that I wanted, however it doesn't really work since the container size grows at once and the picture appears at full size. I assume there is a conflict with the flex-basis of my .*-activity-card. Afterwards, I also tried to apply fit-content, max-content and min-content, but I had basically the same results.

Then, I tried to work with the max-width of .activity-picture. This time, the problem was that my figure container wasn't 'filled' but put aside like illustrated here.

I also tried other methods like not putting the article tags and directly applying flex-basis and other stylings on the figure tags, but I had the same problems of sizing...

Here is my code:

figure {
  margin: 0px;
}

#activities-nav {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  gap: 3%;
  height: 450px;
  padding: 5px;
  margin: 0px 16px 0px 16px;
}

.activity-picture {
  border-radius: 10px 10px 0px 0px;
  width: 100px;
  height: 100%;
  object-fit: cover;
}

.long-activity-card {
  border: 1px dashed red;
  flex-basis: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px #F2F2F2;
  cursor: pointer;
}

.medium-activity-card {
  border: 1px dashed blue;
  flex-basis: 55%;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px #F2F2F2;
  cursor: pointer;
}

.small-activity-card {
  border: 1px dashed green;
  flex-basis: 40%;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px #F2F2F2;
  cursor: pointer;
}

.long-activity-card figure {
  height: 90%;
}

.medium-activity-card figure {
  height: 85%;
}

.small-activity-card figure {
  height: 80%;
}

<nav id="activities-nav">
  <article >
    <figure>
      <img  src="https://i.stack.imgur.com/zjxgC.jpg">
    </figure>
  </article>

  <article >
    <figure>
      <img  src="https://i.stack.imgur.com/cUTh0.jpg">
    </figure>
  </article>

  <article >
    <figure>
      <img  src="https://i.stack.imgur.com/jJXeq.jpg">
    </figure>
  </article>

  <article >
    <figure>
      <img  src="https://i.stack.imgur.com/kFKES.jpg">
    </figure>
  </article>

  <article >
    <figure>
      <img  src="https://i.stack.imgur.com/L1XzJ.jpg">
    </figure>
  </article>

  <article >
    <figure>
      <img  src="https://i.stack.imgur.com/FDI4i.jpg">
    </figure>
  </article>

</nav>

I thank in advance anyone who will take the time to help me.

P.S: Only CSS and HTML are allowed for this project.

CodePudding user response：

coba gambarnya dijadikan background dari cardnya, dan kasih background size cover

CodePudding user response：

I got your problem, and here I suggest you fix this issue in your project by these points...

Use a proper image resolution best resolution is 1920 x 1080 Because sometimes occurs by the problem with image resolution.
Another is you can use object-fit:cover; for covering your image completely in <div>
Another thing is that you can set the width at 100%... After that, it will set the image width, at the complete image resolution, (The same thing also applies with height) ...
At last, Use this snippet to make your image completely covered in div...
position:relative; top:0; left:0; width:100%; height:100%; object-fit:cover; justify-content:center; overflow:hidden;

Definitely, it will work in your project...