主页 / 问题 / 575322
Accepted
Alex
Asked:2020-10-09 00:32:07 +0800 CST2020-10-09 00:32:07 +0800 CST

div 内的图像没有底部水平间隙

  • 772

如何正确设置样式以使img内部图像div没有底部水平“间隙”？在代码示例中，我试图消除图像之间的水平间隙。我尝试了 min/max -height 组合，但没有用。如何对照片进行无间隙的自适应排列？

#menu {
	width:100%;
	height:30px;
    background: #E8DDCF;
    border: solid 1px #E8DDCF;
}


#content {
    margin-top: 2px;
    display: inline-block;
	width:100%;	
    background: #F3E7D8;
    border: solid 1px #E8DDCF; 
}


.f {
    width: 98.4%;
	height: 9%;
    border: 1px solid #F3E7D8;    
    margin: 0 auto;
}


.f:hover {
    border: 1px solid red;
}


.container {
    position: relative;
    width: 12.5%;
    float: left;
}


.bottomleft {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 11px;
    color: blue;
}
<body>
<div id="menu"> </div>	

<div id='content'>
<div id='fotos'>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="01"><div class="bottomleft">q</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="02"><div class="bottomleft">w</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="03"><div class="bottomleft">e</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="04"><div class="bottomleft">r</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="05"><div class="bottomleft">t</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="06"><div class="bottomleft">y</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="07"><div class="bottomleft">u</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="08"><div class="bottomleft">i</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="09"><div class="bottomleft">o</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="10"><div class="bottomleft">p</div></div>
</div>
</div>
</body>

html5

3 个回答

  1. Best Answer

    添加img{display: block; }：

    * {
  box-sizing: border-box;
}

#menu {
	width:100%;
	height:30px;
    background: #E8DDCF;
    border: solid 1px #E8DDCF;
}


#content {
    margin-top: 2px;
    display: inline-block;
	width:100%;	
    background: #F3E7D8;
    border: solid 1px #E8DDCF; 
}


.f {
    max-width: 100%;
    width: 100%;
	height: auto;
    border: 1px solid #F3E7D8;    
    margin: 0 auto;
  
  display: block;
}


.f:hover {
    border: 1px solid red;
}


.container {
    position: relative;
    width: 12.5%;
    float: left;
}


.bottomleft {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 11px;
    color: blue;
}
    <body>
<div id="menu"> </div>	

<div id='content'>
<div id='fotos'>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="01"><div class="bottomleft">q</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="02"><div class="bottomleft">w</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="03"><div class="bottomleft">e</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="04"><div class="bottomleft">r</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="05"><div class="bottomleft">t</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="06"><div class="bottomleft">y</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="07"><div class="bottomleft">u</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="08"><div class="bottomleft">i</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="09"><div class="bottomleft">o</div></div>
<div class="container"><img class="f" src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png" alt="10"><div class="bottomleft">p</div></div>
</div>
</div>
</body>

    响应图像。

    img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

    这样缩进就没有问题了：

    *{
  box-sizing: border-box;
}

    ps：img { dispaly: inline-block; }-默认

    • 2

  2. line-height: 0添加的另一个选项.container

    #menu {
	width:100%;
	height:30px;
    background: #E8DDCF;
    border: solid 1px #E8DDCF;
}


#content {
    margin-top: 2px;
    display: inline-block;
	width:100%;	
    background: #F3E7D8;
    border: solid 1px #E8DDCF; 
}


.f {
    width: 98.4%;
	height: 9%;
    border: 1px solid #F3E7D8;    
    margin: 0 auto;
}


.f:hover {
    border: 1px solid red;
}


.container {
    position: relative;
    width: 12.5%;
    float: left;
    line-height: 0;
}


.bottomleft {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 11px;
    color: blue;
    line-height: 1;
}
    <div id="menu"> </div>	

<div id='content'>
<div id='fotos'>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="01"><div class="bottomleft">q</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="02"><div class="bottomleft">w</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="03"><div class="bottomleft">e</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="04"><div class="bottomleft">r</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="05"><div class="bottomleft">t</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="06"><div class="bottomleft">y</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="07"><div class="bottomleft">u</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="08"><div class="bottomleft">i</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="09"><div class="bottomleft">o</div></div>
<div class="container"><img class="f" src="http://party-boom.ru/catalog_photo/6018580s.png" alt="10"><div class="bottomleft">p</div></div>
</div>
</div>

    • 2

  3. 像这样尝试

    img{width:100%;height:auto}
    • 0

相关问题