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 *
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 :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0