<img> 里面 <figure> 尺寸错误

Question

为什么我的图片放在标签中时尺寸错误，但放在 .

中时却正确显示

我最近将所有内容都切换到使用 figure 来做漂亮的 css 叠加，但它搞砸了图像显示的方式。

这是一个代码笔来说明问题：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%;
}

我知道它一定很简单，但无法弄清楚发生了什么。

谢谢！

Answer 1

要解决此问题，您的图形还需要 width: 100%，然后您需要使用 margin: 0.[= 删除浏览器添加到 figure 的默认边距16=]

这是一个固定的例子：

.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 版本：http://codepen.io/maxlaumeister/pen/YXdQbp

Answer 2

如果你把身材css改成

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

会好的

<img> 里面 <figure> 尺寸错误

<img> inside <figure> wrong size

html

css

image

figure