图像之间的空间在浏览器上增长缩小

我有一些图像随浏览器尺寸变小。它适合我，但随着图像变小，它们之间的空间变大。当浏览器最小时，图片之间的空间就是图片的大小。图像之间的空间在浏览器上增长缩小

如果您将浏览器的大小缓慢调整到最小，您会看到媒体查询启动并查看我的意思。

我曾尝试过很多事情都是失败的。

伊夫试图在拨弄复制它，但它只是需要我的大部分代码，这样做的，所以我只能提供链接的网页http://www.techagesite.com/page-1work1112211.htm

.top_grow{ 

     display:inline-block; 
     vertical-align:top; 
     font-size:0; 
     margin:0 auto; 
     overflow:hidden; 
     white-space:nowrap; 
    } 


.cats {width:100%; 
height:100%; 
display:block; 
font-size:0; 
} 

       .text{ 
     font-size:11px; 
     letter-spacing:1px; 
     word-spacing:1px; 
    } 



     <div class="top_grow"> 
      <a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm"> 
       <img class="cats" src="http://freephonewallpapersformobile.files.wordpress.com/2014/05/super-mario-galaxy-hd-desktop-background_small1.jpg"></img> 
       <div class="text"> 
        Mario Galaxy 
       </div> 
      </a> 
     </div>

来源

2014-05-19 Techagesite

您也可以尝试在代码顶部使用'<！DOCTYPE HTML>'。它可能需要您重新编码所有内容来管理布局，但HTML 5可能会提供更高的稳定性。另外，如果您想使用Bootstrap框架，它可以帮助您在布局中自动在Mobile和其他浏览器中展开图片。不要忘记使用视口设置，以符合移动设备：

我希望得到一个CSS答案 – Techagesite

看起来好像你的图像间隔与空间字符。空格字符没有流体宽度。

解决方案将使用浮动。

喜欢的东西

.holder { 
    width: 100%; 
} 

.img-holder { 
    float: left; 
    margin-right: 3%; 
    width: 22%; 
    height: 100px; 
    background-color: #ccc; 
} 

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

<div class="holder"> 
    <div class="img-holder"><img src="#" /></div> 
    <div class="img-holder"><img src="#" /></div> 
    <div class="img-holder"><img src="#" /></div> 
    <div class="img-holder"><img src="#" /></div> 
</div>

这会给你的图像的四列具有可变宽度的排水沟。

你需要改变这个以适应你自己的目的，但是我希望这会让你朝着正确的方向发展。

先尝试一个新文件，然后将你学到的东西应用于你的特定问题，这应该很好。

来源

2014-05-19 08:07:24 Sarcoma

请注意，img标签是自闭。 http://stackoverflow.com/questions/14860492/how-to-close-img-tag-properly – Sarcoma

谢谢你给它一个回去，让它回复你 – Techagesite

太好了，让我知道它是怎么回事。 – Sarcoma

图像之间的空间在浏览器上增长缩小

回答

相关问题