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

时间:2015-08-01 19:07:01

标签: html css image 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%;
}

我知道它必须是简单的东西,但无法解决正在发生的事情。

谢谢!

2 个答案:

答案 0 :(得分:2)

要解决此问题,您的数字还需要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

答案 1 :(得分:1)

如果你将你的数字css改为

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

它会没事的