9張圖像在HTML和CSS的3x3網格中一起收縮？

我的網頁上有9張3x3網格圖像。目前在我的寬屏筆記本電腦上觀看時看起來很好，但是當我在較小的設備上觀看時，圖像彼此堆疊在一起，因爲它具有響應能力。我希望圖像一起縮小（並保留在他們的3x3網格中）而不是堆疊。我甚至不知道從哪裏開始。
在此先感謝！9張圖像在HTML和CSS的3x3網格中一起收縮？

對不起，沒有太多的代碼。我的部分寬940像素，每幅圖像寬300px。

<section id="picture"> 
<img src="1.jpg"> 
<img src="2.jpg"> 
<img src="3.jpg"> 
<img src="4.jpg"> 
<img src="5.jpg"> 
<img src="6.jpg"> 
<img src="7.jpg"> 
<img src="8.jpg"> 
<img src="8.jpg"> 
</section>

來源

2013-05-31 Kobaine

您需要發佈您的現有代碼我們任何人弄清楚如何糾正您遇到的問題。確保包含相關的CSS和HTML。謝謝！ –

我看到你已經添加了你的HTML，但你的CSS呢？ CSS將成爲這裏的推動因素。 –

從開始處開始：http://alistapart.com/article/responsive-web-design您的圖像百分比是基於什麼？他們應該是。 Google針對諸如「流動網格」或「靈活網格」之類的內容提供了一些示例。 – Bart

，最好的辦法是使用display:inline-block，max-widths和百分比

DEMO http://jsfiddle.net/kevinPHPkevin/Ptqde/

section { 
    max-width:300px; 
} 
img { 
    max-width:80px; 
    display:inline-block; 
    width:30%; 
}

來源

2013-05-31 21:38:29 Vector

謝謝！這很好。出於某種原因，當手機尺寸達到手機尺寸時，我的手機仍然會斷線，但對於最重要的平板電腦來說，它仍然有效 – Kobaine

這在理論上會下降到0。如果它打破了它是由於你的HTML或CSS中的其他元素造成干擾。樂意效勞。 – Vector

-1

我掀起了a sample of how to implement this。

該HTML代碼是一個簡單的無序列表，在ul內有9個空的li元素。 CSS的是他們的固定大小的母中所佔的百分比基於一套規則：

li { 
    width:33%; 
    height:33%; 
    top:33%; 
    list-style:none; 
    position:absolute; 
} 
li:nth-child(-n+3) { 
    top:0; 
} 
li:nth-child(n+7) { 
    top:66%; 
} 
li:nth-child(3n+2) { 
    left:33%; 
} 
li:nth-child(3n+3) { 
    left:66%; 
}

在我的例子我用一個固定的背景background-size:cover把圖片放在那裏 - 這本身就說明了，你可以把任何東西在li元素，因爲這種方法確保它們始終具有正確的大小。

來源

2013-05-31 21:34:45

9張圖像在HTML和CSS的3x3網格中一起收縮？

回答

相關問題