如何創建響應式4格鑽石？

我正在研究一個需要響應的圖片div鑽石項目。如何創建響應式4格鑽石？

下圖顯示了我創建的div中的鑽石，但它不適用於所有尺寸。我希望鑽石對瀏覽器尺寸作出反應，所以它總是適合的。

current website with nonresponsive diamond

我有a jsFiddle，但它不響應。只是爲了展示我想要的，我一直在努力創造。

<div id="page"> 
<div id="main"> 
    <div class="box blue"></div> 
    <div class="box green"></div> 
    <div class="box red"></div> 
    <div class="box yellow"></div> 
</div> 
</div>

#page { 
    width:100%; 
    height:100%; 
    min-height:500px; 
    min-width:500px; 
} 
#main { 
    height:80px; 
    width:80px; 
    position:relative; 
    display:block; 
    transform: rotate(45deg); 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Safari and Chrome */ 
} 
.box { 
    display: inline-block; 
    height:35%; 
    width:35%; 
    margin-right:5%; 
    margin-top:5%; 
} 
.blue { 
    background-color:blue; 
} 
.green { 
    background-color:green; 
} 
.red { 
    background-color:red; 
} 
.yellow { 
    background-color:#ffd54f; 
}

任何幫助是非常讚賞:-)

來源

2014-02-14 Münter

我們能有什麼是應該的屏幕來界定呢？你的例子有空文本，並沒有打印任何東西，所以我不確定你的意思是「鑽石」 –

我在截圖中添加了我到目前爲止的內容。 –

嗯好吧，我想你可能會考慮測試firefox上的所有內容，或者這只是我的一個問題？ –

開始與響應鹼：

#main { 
    width: 35%; 
    height: 0; 
    position: relative; 
    padding-bottom: 35%; 
    border: solid 1px black; 
    margin: auto; 
}

訣竅是設置垂直尺寸作爲填充百分比，即在父的寬度來計算。（所以它總是一個正方形）

現在設置鑽石，翻譯爲百分比。

.box { 
    height:100%; 
    width:100%; 
    position: absolute; 
} 
.blue { 
    background-color:blue; 
    -webkit-transform: translate(-75%, 100%) rotate(45deg); 
} 
.green { 
    background-color:green; 
    -webkit-transform: translate(0, 25%) rotate(45deg); 
} 
.red { 
    background-color:red; 
    -webkit-transform: translate(75%, 100%) rotate(45deg); 
} 
.yellow { 
    background-color:#ffd54f; 
    -webkit-transform: translate(0, 175%) rotate(45deg); 
}

fiddle

來源

2014-02-14 08:53:40 vals

不錯！我可以通過這項工作來完善我的項目！謝謝！ –

幸福，它幫助！ – vals

編輯：好的它可以用CSS單獨完成。更新小提琴在這裏： http://jsfiddle.net/5CfNb/5/

不知道這是否可以用CSS來完成，但這裏是我的解決方案使用幾行jQuery。儘管取決於長寬比，但它不會是一個完美的「鑽石」，所以仍然需要一些調整。但我希望這有助於。

$('#main').height($(window).height()); 
$('#main').width($(window).width()); 

$(window).resize(function() { 
    $('#main').height($(window).height()); 
    $('#main').width($(window).width()); 
});

http://jsfiddle.net/5CfNb/4/

來源

2014-02-14 08:39:26 deadconversations

不完全是我在找的東西。圖片需要保持其方形。重新調整瀏覽器大小時不會產生副作用。 –

Münter，它需要流體嗎？給你的#main一個固定的寬度/高度將解決這個問題，但是當然會破壞流體的響應度。如果它不需要流體，我建議使用mediaqueries來設置#main div的固定寬度/高度。 – deadconversations

流體解決方案會很棒，但是我猜mediaqueries可以解決這個問題 –

這也可以幫助你一點：http://jsfiddle.net/maximgladkov/bJLYn/1/

#main { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -15% 0 0 -15%; 
    height: 0px; 
    width: 30%; 
    padding-top: 30%; 
    overflow: visible; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
.box { 
    display: block; 
    width: 45%; 
    height: 45%; 
    position: absolute; 
} 
.blue { 
    background: blue; 
    top: 0; 
    left: 0; 
} 
.green { 
    background: green; 
    top: 0; 
    right: 0; 
} 
.red { 
    background: red; 
    bottom: 0; 
    right: 0; 
} 
.yellow { 
    background: #ffd54f; 
    bottom: 0; 
    left: 0; 
}

來源

2014-02-14 09:07:22

如何創建響應式4格鑽石？

回答

相關問題