为什么放置在标签内时我的图像尺寸错误,但在内部显示时图像正确显示。
我最近将所有内容都改为使用数字来做好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%;
}
我知道它必须是简单的东西,但无法解决正在发生的事情。
谢谢!
答案 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>
答案 1 :(得分:1)
如果你将你的数字css改为
figure {
width: 200px;
margin:0!important;
}
它会没事的