圖像大小不等的簡單CSS網格

他們應這樣的表現：

拉伸到屏幕寬度的100％，如果在小屏幕上觀看
拉伸到屏幕寬度的50％，如果在平板電腦屏幕觀看
拉伸至如果在大型桌面屏幕上查看屏幕寬度的25％

我有一些非常接近的東西，但問題是，圖像具有不同的大小，因此佈局被破壞。我應該如何修復代碼，以便較小的圖像將被拉伸得更大以自動匹配更大的盒子？

看到這裏的問題：http://jsfiddle.net/Gep2G/embedded/result/

我的HTML源代碼：

<body> 
    <div id='wrapper'><img src='http://placekitten.com/352/288'/></div> 
    <div id='wrapper'><img src='http://placekitten.com/352/288'/></div> 
    <div id='wrapper'><img src='http://placekitten.com/352/288'/></div> 
    <div id='wrapper'><img src='http://placekitten.com/320/240'/></div> 
    <div id='wrapper'><img src='http://placekitten.com/320/240'/></div> 
</body>

我的CSS：

body {margin:0;padding:0} 
img{width:100%;height:100%;} 
#wrapper{width:100%;float: left;} 

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    body {margin:0;padding:0} 
    img{width:100%;height:100%;} 
    #wrapper{width:100%;float: left;} 
} 
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    body {margin:0;padding:0} 
    img{width:100%;height:100%;} 
    #wrapper{width:50%;float: left;}  
} 
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    body {margin:0;padding:0} 
    img{width:100%;height:100%;} 
    #wrapper{width:50%;float: left;}  
} 
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    body {margin:0;padding:0} 
    img{width:100%;height:100%;} 
    #wrapper{width:25%;float: left;}  
}

編輯代碼： http://jsfiddle.net/Gep2G/

來源

2013-12-10 mkto

但是這會扭曲你的圖片 – ProllyGeek

雅...我不知道反正是有拉伸較小的圖像比例，以配合更大的圖像.. – mkto

-1

它是一個簡單的修復。

http://jsfiddle.net/Gep2G/4/embedded/result/

img{width:100%; hieght:352px;}

只要你指定一個維度：瀏覽器將自動填充圖像的適當比例。繼續爲每個媒體查詢設置所需的高度。

此外，您的CSS中有一些錯誤。例如，一個id只能應用於單個元素。使用多個元素的類（比如你的包裝器元素）。

來源

2013-12-10 05:31:22 agconti

但通過設置一個高度...圖像可能會水平拉伸...嗯..（感謝指出錯誤..） – mkto

只要你設置你的圖像高度按比例在每個媒體查詢圖像不會被扭曲。它有點手動強化，但比li溢出技巧更容易實現。 – agconti

我犯了一個腳本解決這個問題之前：

http://jsfiddle.net/prollygeek/QD9kZ/

side1=0,side2=0 

$(".flexbox").children().each(function(index, element) { 
    if (index % 2 === 0) //odd children (starts with 0) 
    { 
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height")) 
    } 
else //even children 
    { 
$(this).css("top",side2+"px") 
$(this).css("left","50%") 
side2+=parseInt($(this).css("height")) 
    } 
});

但如果你想純CSS的解決方案，我會建議您檢查： http://designshack.net/articles/css/masonry/ 純CSS的解決方案。

來源

2013-12-10 05:22:40 ProllyGeek

演示看起來將扭曲的形象嗎？ – mkto

確實，任何解決方案都會扭曲圖像，因爲您正在拉伸它！最好的解決方案是正確分類（因爲它們有不同的尺寸），這就是我的解決方案。 – ProllyGeek

@media (min-width: 1281px){ 
#wrapper { 
width: 25%; 
float: left; 
height: 20em; 
} 
}

來源

2013-12-10 05:36:49

並不能真正滿足我的要求，即圖像的寬度必須動態填充屏幕。（100％，50％，25％...） – mkto

圖像大小不等的簡單CSS網格

回答

相關問題