Autor | Zpráva | ||
---|---|---|---|
lachim15 Profil |
Ahoj, píšu si vlastní galerii a narazil jsem na problém.
Začnu od začátku. Mám na stránce mini ikony s náhledy obrázků - po rozkliknutí obrázku se zobrazí galerie, která je position:fixed a roztáhlá přes celou stránku. Uvnitř se pak nachází hlavička s nadpisem a křížkem pro zavření - pod hlavičkou obsah s obrázkem. Krásně mi to mění velikost obrázku podle šířky displeje: ale pokud je okno prohlížeče menší na výšku než obrázek, tak obrázek zaleze pod okno a nejde se k němu ani doscrollovat. Otázka tedy zní, jestli se dá nějak měnit velikost obrázku podle výšky okna? html kód: <div id="gallery_1" class='gallery gallery_none'> <div class='gallery_header'>Nadpis<div class='right_icons'><img src='img/cross_gallery.png' alt='<?php echo $lang_close; ?>' title='<?php echo $lang_close; ?>' onclick="close_gallery('gallery_1');"></div></div> <div class="slideshow-container"> <div class="mySlides fade"> <div id='pos_text_1' class="numbertext"></div> <img id="mySlides1" src="img/no_image.jpg"> <div id='text_image_1' class="text"></div> </div> <a id='prev1' class="prev" onclick="plusSlides('mySlides1',-1)" title="<?php echo $lang_previous; ?>">❮</a> <a id='next1' class="next" onclick="plusSlides('mySlides1',1)" title="<?php echo $lang_next; ?>">❯</a> </div> <div class='slider_inner_empty_loading'></div> </div> Obrázky se mění a zobrazují namísto: <img id="mySlides1" src="img/no_image.jpg"> CSS kód: /* Image gallery */ .gallery { position:fixed; top:0px; left:0px; width:100%; height:100%; background:#272d33; z-index:997; text-align:center; display:inline-block; } .gallery_header { display:block; color:white; font-weight:bold; text-align:left; font-size:23px; min-width:400px; width:100%; padding:20px; border-bottom:2px solid #f23030; margin-bottom:20px; } .gallery_header img { cursor:pointer; } .gallery_block { display:block; } .gallery_none { display:none; } .no_style { border:0px; } .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } /* Slideshow container */ .slideshow-container { position: relative; margin:0 auto; display:inline-block; z-index:999; } .slider_inner_empty_loading { background:transparent url('../img/loading.gif') center center no-repeat; width:64px; height:64px; margin:0 auto; display:block; position:absolute; top:180px; z-index:998; left: 50%; margin-left: -32px; /* Negative half of width. */ } .margin-top_loading { margin-top:50px; } /* Hide the images by default */ .mySlides { } .mySlides img { max-width: 100%; height: auto; width: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } .prev { left: 0; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); color:white; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; background:transparent; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } .right_icons { display:inline-block; float:right; } /* Image gallery end */ |
||
RastyAmateur Profil |
lachim15:
Můžeš zkusit nějakým způsobem využít jednoty vh (viewport height). 100vh je výška obrazovky (se správně nastaveným viewportem)
Ale budeš muset asi předělat výšky i ostatních elementů, aby tam byly zadány taktéž natvrdo Například tady mám malou ilustraci. Pomocí jednotek vh si nastavím to, co potřebuji a následně pomocí flex si celý ten obsah vycentruji na střed
|
||
Mlocik97m Profil * |
#3 · Zasláno: 7. 12. 2018, 18:43:06
než veľkosť obrázku bych řešil důvod, proč to nescrolluje
|
||
lachim15 Profil |
RastyAmateur:
To vypadá dobře, mrknu na to. Díky za tip :) EDIT: Funguje to úplně perfektně, děkuji :) |
||
Časová prodleva: 5 let
|
0