爲什麼這些圖片在圖庫中被「移動」或「碰撞」？

我正在嘗試實現圖像顯示方式，以便查看本網站的用戶更喜歡在我的圖像現有滑塊上查看平鋪圖像。爲什麼這些圖片在圖庫中被「移動」或「碰撞」？

畫廊被標記如下：

<!-- TILE GALLERY --> 
    <div id=tileGallery > 
     <?php for ($x=0; $x<40; $x++) 
     {?> 
     <div class="col-lg-3 col-md-4 col-xs-6"> 
      <img id=img_<?php echo$x;?> data-zoom-image="picsLarge/home-<?php echo $x+1;?>.jpg" class=imgGal src="pics/home-<?php echo $x+1;?>.jpg"> 
     </div><?php 
     }?> 
    </div>  
    <!-- end tile gallery -->

這裏是CSS（不顯示還沒有被改變自舉類）

#tileGallery 
{ 
    width:90%; 
    height:80%; 
    margin-left:auto; 
    margin-right:auto; 
} 
.imgGal 
{ 
    max-width: 100%; 
    max-height: 100%; 
    height: auto; 
}

的圖像顯示在網格中，我期望他們是，但是有些是'碰撞'或'轉移'過來的，並且在我期待和想象的位置會有一個空的空間。（實施例遵循在網頁的3個示例圖像）：

實施例的圖像/問題的屏幕截圖：http://johnkellyphotos.com/exampleForSO/

正如可以從上面的三個圖像看到，中間大小的網絡瀏覽器正確地顯示，而大的和小轉移圖像就好像他們在他們的位置是空的。清楚的是，它不是無法在空白處顯示圖像，只是沒有元素存在。

這是我曾嘗試：

確保所有圖像都上傳到服務器
設置溢出隱藏櫃面一些圖像在某種程度上放大之前完全相同的大小和「碰撞」下一個圖像
將填充和頁邊距修改爲大多數邏輯值（範圍從0px/0％）到其他較小值
將圖像顯示爲背景圖像而非圖像標籤，這似乎解決了這個特定問題，然而卻導致全新的的世界在重做大多數的JavaScript的創造更多的工作，最終不太可能其他問題是值得的，如果這有一個簡單的解決方案
將每個圖像之間的另一個div標籤來創建圖像
之間添加另一格填充每個硬編碼到特定寬度的圖像周圍都沒有溢出，並且隱藏溢出。（這也適用，但創建一個噩夢，使頁面動態，因爲我必須指定的寬度準確

我理想上喜歡這個工作，即使圖像上傳時不完全相同的大小，這樣他們顯示整齊，居中，並且不會'碰撞'出位置。我在向搜索引擎描述我的問題時遇到困難，因此很難找到對我的問題特別有幫助或具體的任何內容。這個問題的任何部分不清楚，讓我知道，所以我可以修復它。

謝謝！

來源

2016-11-15 John

你可以在codepen或jsfiddle上使用相同的css和代碼來使用圖片，以便我們可以查明是什麼原因造成的。 –

當你說'設置填充邊距'爲0 ...你是否試圖將其設置爲包含圖像的div？按照定義... boostrap col類使用其容器寬度的100％，但如果由於某種原因，有一個類在cols之間添加填充或邊距，則會出現這種行爲。 –

也作爲@NasirT指出...一個小提琴會幫助很多 –

當像你一樣在CSS中使用百分比時，很多時候寬度和高度都是以小數形式輸出的，這些小數由各個瀏覽器以不同的方式進行四捨五入。我經常遇到類似這樣的問題，因爲這種舍入是不常見的，並導致一些容器比相鄰容器大1px，這將導致「移位」圖像。

讓我們格：

A B C
d電子網
G H I

只要所有的單元共享完全相同的高度他們將是完美的網格。然而，如果得到四捨五入爲1px比其它元素高的電網將變成：

ABC
DE
FGH
我

這是因爲A是1px的比乙高和C，這使它侵入了1px，進入到下一個「行」中，這些浮標正在創建。現在D和E的行爲就像A在他們的左邊，他們從右邊開始1個位置。

這可能以多種不同的方式發生，導致不同的圖像在網格的不同區域被「推送」。

我的建議是解決這個問題是使用Javascript來設置容器的高度。所以他們都是完全一樣的高度。不要依賴CSS百分比給定不變的大小。

來源

2016-11-15 18:20:09

這工作完全！非常感謝你，明確的解釋和解決問題。 – John

爲什麼這些圖片在圖庫中被「移動」或「碰撞」？

回答

相關問題