Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="photogallery"> <div class="image cover-x"> <div class="placeholder"> <img src="i/100x200"> </div> </div> <div class="image cover-y"> <div class="placeholder"> <img src="i/100x200"> </div> </div> <div class="image cover-x"> <div class="placeholder"> <img src="i/200x100"> </div> </div> <div class="image cover-y"> <div class="placeholder"> <img src="i/200x100"> </div> </div> <div class="image"> <!-- správny pomer --> <div class="placeholder"> <img src="i/200x120"> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#photogallery .image { position: relative; float: left; width: 30%; margin-right: 5%; margin-bottom: 2em; overflow: hidden; border: 4px solid #507642; box-sizing: border-box; cursor: pointer; } #photogallery .image:nth-child(3n) { margin-right: 0; } #photogallery img { height: 100%; position: absolute;; } #photogallery .cover-x img { height: auto; width: 100%; left: auto; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } #photogallery .cover-y img { height: 100%; max-width: none; left: 50%; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } #photogallery .placeholder { padding-bottom: 60%; /* vyjadruje pomer výšky ku šírke (v tvojom prípade 100%) */ }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>