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 >
<figure>
<img 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>
CodePudding user response:
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 >
<figure>
<img 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>