Question

我有和div包裹的图像元素：

 <div id="main_image_wrapper">
    <img id="main_image" src="image.jpg" />
 </div>

而且，没有图像可以显示。当image.jpg不存在时，我仍然想保留布局（稍后我会在javascript中使用），所以代码将是：

 <div id="main_image_wrapper">
    <img id="main_image"  />
 </div>

我希望这个div元素不会占用（垂直）空间，但不幸的是，它确实存在。我尝试使用line-height：

  div#main_image_wrapper{line-height:1px;}

或

  div#main_image_wrapper{line-height:0;}

但结果div高度不会低于6px。

当我使用时：

  img#main_image{display:block;}

这个额外的空间将会消失。但我不能在页面布局中使用块图像。

如果6 px为空，我该如何删除此不受欢迎的img空间？

非常感谢。

Answer 1

也许你可以在没有src的情况下隐藏图像：

img:not([src]) {
   display: none;
}

从技术上讲，img没有src属性无效。如问题What's the valid way to include an image with no src?中所讨论的，有很多方法可以解决这个问题。但是，如果你改变它，你当然也需要改变CSS。：）

要解决此问题，请使用此有效的html：

 <div id="main_image_wrapper">
    <img id="main_image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="  />
  </div>

并通过以下css，防止占用空间：

 img#main_image[src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="]
             {display:none;}

Answer 2

为什么不在这种情况下使用不同的类，比如说noImg？

div.noImg {
  display: none;
}

编辑：我假设您正在使用Javascript编辑div / img，否则您无法完全编辑src元素的img属性，对吗？

Answer 3

试试这个会对你有所帮助。只需在图像标记之后使用空格  ，然后您可以使用行高;

＆＃13;

#main_image_wrapper{
    border:1px solid blue;
    lineheight:40px;
}

＆＃13;

<div id="main_image_wrapper">
    <img id="main_image"  /> &nbsp;
 </div>

＆＃13;

Answer 4

CSS

#main_image_wrapper{
    border:1px solid blue;
    background:blue;
}
img{
    display: block;
}

HTML

 <div id="main_image_wrapper">
    <img id="main_image"  />
 </div>