How to arrange the style correctly so that the image img inside the div does not have a lower horizontal 'gap'? In the sample code I try to remove the horizontal gap between the images. I tried the min / max -height combination, it did not work. How to make an adaptive arrangement of pictures without gaps?

 #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>

    3 answers 3

    Add img{display: block; } 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>

    Adaptive images.

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

    And to avoid problems with indents:

     *{ box-sizing: border-box; }

    ps: img { dispaly: inline-block; } img { dispaly: inline-block; } - by default

    • Elena Semenchenko, c display: block; Until it turned out ... I try - Alex
    • Elena, is img not a block element by default? - perfect
    • one
      @Alex, corrected, it can be that way. - HamSter
    • @ElenaSemenchenko, understood - perfect
    • one
      Elena Semenchenko, working, thanks - Alex

    Another option is to add line-height: 0 for .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>

    • soledar10, works, is a very good option, thanks - Alex

    try this

     img{width:100%;height:auto}