CODEWITHSUNDEEP
htmlcssimagefigure
rxssmcdxwell
rxssmcdxwell

Reputation: 99

<img> inside <figure> wrong size

Why is it that my image is the wrong size when placed inside a tag, but displays correctly when inside a .

I recently switched everything over to using figure for doing nice css overlays, but it has screwed up the way images display.

Here is a codepen to show the problem: http://codepen.io/anon/pen/BNvZbJ

.grid-item {
    float: left;
    width: 200px;
    height: 200px;
    background-color: yellow;
}

figure {
  width: 100px;
}

.grid-item img {
    height: auto;
    vertical-align: bottom;
    width: 100%;
}
<h1> Image is wrong size, should be size of yellow square </h1>
<div class="grid-item">
  <figure>
    <img src="http://placehold.it/420x420"/>
      <figcaption class="overlay-custom">
      </figcaption>
  </figure>
</div>
</br></br></br></br></br></br></br></br></br></br></br></br>
<h1> Like this </h1>
<div class="grid-item">
  <div>
    <img src="http://placehold.it/420x420"/>
      <p class="overlay-custom">
      </p>
  </div>
</div>

HTML:

<div class="grid-item">
  <figure>
    <img src="http://placehold.it/420x420"/>
      <figcaption class="overlay-custom">
      </figcaption>
  </figure>
</div>

CSS:

.grid-item {
    float: left;
    width: 200px;
    height: 200px;
    background-color: yellow;
}

figure {
  width: 100px;
}

.grid-item img {
    height: auto;
    vertical-align: bottom;
    width: 100%;
}

I know its must be something simple but can't work out what is going on.

Thank you!

Upvotes: 1

Views: 2857

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28593

if you change your figure css to

 figure {
  width: 200px;
  margin:0!important;
  }

it'll be fine

Upvotes: 1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20399

To fix this, your figure needs to also have width: 100%, then you need to remove the default margins that the browser adds to your figure, using margin: 0.

Here is a fixed example:

.grid-item {
    float: left;
    width: 200px;
    height: 200px;
    background-color: yellow;
}

figure {
  width: 100%;
  margin: 0;
}

.grid-item img {
    height: auto;
    vertical-align: bottom;
    width: 100%;
}
<h1>Image is the right size, the size of the yellow square!</h1>
<div class="grid-item">
  <figure>
    <img src="http://placehold.it/420x420"/>
      <figcaption class="overlay-custom">
      </figcaption>
  </figure>
</div>
</br></br></br></br></br></br></br></br></br></br></br></br>
<h1> Like this </h1>
<div class="grid-item">
  <div>
    <img src="http://placehold.it/420x420"/>
      <p class="overlay-custom">
      </p>
  </div>
</div>

Codepen version: http://codepen.io/maxlaumeister/pen/YXdQbp

Upvotes: 2

Related Questions