61,112
社区成员
发帖
与我相关
我的任务
分享第二张img高度、宽度为0了为什么还占着位置，露出红色的背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tyle="text/css">
* {
padding: 0px;
margin: 0px;
}
img {
vertical-align: middle;
}
div {
width: 322px;
background: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
<img src="images/t.jpg" alt="" width="322" height="244">
<!-- <img src="images/b.jpg" alt="" width="322" height="101"> -->
<!--将第二张图片的高度、宽度设置为0 露出红色背景-->
<img src="images/b.jpg" alt="" width="0" height="0">
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tyle="text/css">
* {
padding: 0px;
margin: 0px;
}
img {
vertical-align: middle;
}
div {
width: 322px;
background: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
<img src="images/t.jpg" alt="" width="322" height="244">
<!-- <img src="images/b.jpg" alt="" width="322" height="101"> -->
<!--将第二张图片的高度、宽度设置为0 露出红色背景-->
<img src="images/b.jpg" alt="" width="0" height="0">
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
ღ简单 2019-05-28
- 打赏
- 举报
建议图片给宽高，不然会默认铺满，或者就是图片自身的大小。以下是mdn的解释
图像对象的实际尺寸计算算法如下：
如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；
如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；
如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小（翻译可能会有误，求大神快来翻译）；
潇湘忆梦 2019-05-28
- 打赏
- 举报
display:block 是将元素显示为块级元素，高度，行高以及顶和底边距都可控制，设置宽高后，就是独占一行；
inline-block表示的是行内块状元素，比如：img、input在默认情况下即为行内块状元素，默认情况下，display属性的值为inline-block。
一笑程序猴 2019-05-27
- 打赏
- 举报
看上去尽管第二张图片高度已经为0，但是div还是把它的高度给预留出来了。
把div的高度设置为跟第一张图片的高度一样就可以了
不过为什么要这样写呢，如果第二张图片高度为0 那直接去掉就可以了
把div的高度设置为跟第一张图片的高度一样就可以了
不过为什么要这样写呢，如果第二张图片高度为0 那直接去掉就可以了
acerpeople 2019-05-27
- 打赏
- 举报
自己没事闲着捣鼓下
，我发现把img 的 display改成display:block就没有这种现象了，反而display:inline-block会有这种现象，是不是有什么更深层次的原因
，我发现把img 的 display改成display:block就没有这种现象了，反而display:inline-block会有这种现象，是不是有什么更深层次的原因