Figure tag affect image size

August 4, 2022

For a project, I’m now changing from non-semantic to semantic HTML, but I have encountered a problem with the figure tag.

When I’m nesting my <img> in <figure>, the picture becomes ridicously small, here you can see the before/after. However, I was told that this tag should not affect the flow of the document, so I don’t know if it’s normal…

In this case, I don’t really know what to do, I tried to adjust the width on figure but it doesn’t work.

Here is my code:

img {
  max-width: 100%;
  height: auto;
}

#accommodation-content {
  display: flex;
  flex-flow: row wrap;
}

#acccommodation-city {
  flex-grow: 2;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px px 16px;
  margin-right: 16px;
  margin-left: 16px;
}

#accommodation-nav {
  display: flex;
  flex-flow: row wrap;
}

#accommodation-nav>article {
  flex-basis: 33%;
}

.accommodation-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: min-content;
  max-width: 180px;
  cursor: pointer;
}

.accommodation-item:hover {
  background-color: #DEEBFF;
  transform: scale(1.03);
}

.accommodation-picture {
  border: 3px solid white;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  object-fit: cover;
}

<section id="accommodation-content">
  <article id="acccommodation-city">
    <nav id="accommodation-nav">
      <article class="accommodation-item">
        <figure>
          <img class="accommodation-picture" src="https://i.stack.imgur.com/Mbjwm.jpg">
        </figure>
        <h5>Auberge la Cannebière</h5>
        <p>Night starting at <strong>25€</strong></p>
      </article>
    </nav>
  </article>
</section>

>Solution :

You need to cancel the default margin of the figure.

A good CSS Reset would take case of this for you.

figure {
margin:0;
}

img {
  max-width: 100%;
  height: auto;
}

#accommodation-content {
  display: flex;
  flex-flow: row wrap;
}

#acccommodation-city {
  flex-grow: 2;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px px 16px;
  margin-right: 16px;
  margin-left: 16px;
}

#accommodation-nav {
  display: flex;
  flex-flow: row wrap;
}

#accommodation-nav>article {
  flex-basis: 33%;
}

.accommodation-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: min-content;
  max-width: 180px;
  cursor: pointer;
}

.accommodation-item:hover {
  background-color: #DEEBFF;
  transform: scale(1.03);
}

.accommodation-picture {
  border: 3px solid white;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  object-fit: cover;
}

<section id="accommodation-content">
  <article id="acccommodation-city">
    <nav id="accommodation-nav">
      <article class="accommodation-item">
        <figure>
          <img class="accommodation-picture" src="https://i.stack.imgur.com/Mbjwm.jpg"   
               alt="A picture of one of the hotel's room of Auberge la Cannebiere" 
               title="Hotel room of Auberge la Cannebiere">
        </figure>
        <h5>Auberge la Cannebière</h5>
        <p>Night starting at <strong>25€</strong></p>
      </article>
    </nav>
  </article>
</section>