圖像之間的空間在瀏覽器上增長縮小

我有一些圖像隨瀏覽器尺寸變小。它適合我，但隨着圖像變小，它們之間的空間變大。當瀏覽器最小時，圖片之間的空間就是圖片的大小。圖像之間的空間在瀏覽器上增長縮小

如果您將瀏覽器的大小緩慢調整到最小，您會看到媒體查詢啓動並查看我的意思。

我曾嘗試過很多事情都是失敗的。

伊夫試圖在撥弄複製它，但它只是需要我的大部分代碼，這樣做的，所以我只能提供鏈接的網頁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

圖像之間的空間在瀏覽器上增長縮小

回答

相關問題