Question

为什么放置在标签内时我的图像尺寸错误，但在内部显示时图像正确显示。

我最近将所有内容都改为使用数字来做好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%，然后您需要使用figure删除浏览器添加到margin: 0的默认边距。

这是一个固定的例子：

.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;
  }

它会没事的

{figure>里面的<img/>错误的大小

2 个答案: