Autor Zpráva
radekt
Profil
Dobrý den,
nevím, jak vedle obrázků, sloužících pro slideshow, proporciálně zmenšit i div, který je obaluje, je-li stránka otevřena v zařízení s menším displejem. Nedám-li divu rozměr, nezobrazí se vůbec, dám-li mu jej, pak v menším zařízení je jeho šířka v pořádku, ale výška převyšuje obrázek, který obaluje. Názorněji je to vidět na této stránce (pozor, nejedná se o ostrý web, ale zkušební). Když hodně zúžím okno prohlížeče (nebo přímo na mobilním zařízení), pak text "Informační deska" není hned pod obrázkem, ale poněkud níže. Nevíte někdo, jak na to? Děkuji. Radek Tůma
Kód:
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
        <title>Stránka</title>
    <style>
  
    /* SLIDESHOW */
    #container {
      margin: auto;
      width: 540px;
      height: 330px;
      max-width: 100%;
      overflow: hidden;
      position: relative;
      border: 2px solid black;
    }
    #container img {
      position: absolute;
      -webkit-animation: round 15s infinite;
      -moz-animation: round 15s infinite;
      -o-animation: round 15s infinite;
      animation: round 15s infinite;
      zoom: 1;
      filter: alpha(opacity=0);
      -webkit-opacity: 0;
      -moz-opacity: 0;
      opacity: 0;
    }
    #container img:nth-child(3) {
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      -o-animation-delay: 0s;
      animation-delay: 0s;
    }
    #container img:nth-child(2) {
      -webkit-animation-delay: 5s;
      -moz-animation-delay: 5s;
      -o-animation-delay: 5s;
      animation-delay: 5s;
    }
    #container img:nth-child(1) {
      -webkit-animation-delay: 10s;
      -moz-animation-delay: 10s;
      -o-animation-delay: 10s;
      animation-delay: 10s;
    }
     
    @-webkit-keyframes round{ 25%{opacity: 1;} 40%{opacity: 0;}}
    @-moz-keyframes round{ 25%{opacity: 1;} 40%{opacity: 0;}}
    @-o-keyframes round{ 25%{opacity: 1;} 40%{opacity: 0;}}
    @keyframes round{ 25%{opacity: 1;} 40%{opacity: 0;};
    }
    
    img {
      /* proporciální zmenšení obrázku */
      max-width: 100%;
      height: auto;
      border: none;
    }
    
    </style>
    </head>
  <body>
  
    <div id="article" role="article">
    
      <h1>Nadpis</h1>
      
      <!-- Obrázky pro slideshow -->
      <div id="container">
        <img src="img1.jpg" alt="img1">
        <img src="img2.jpg" alt="img2">
        <img src="img3.jpg" alt="img3">
      </div>
    
    Další text.
    </div><!--article-->

    </body>
</html>
Tomáš123
Profil
radekt:
Šlo by obaľovaciemu prvku <div> nastaviť minimálne a maximálne rozmery. Skúšal si už niečo podobné? Potenciálny problém by mohla tvoriť deklarácia absolútnej pozície obrázku. Na čo vlastne slúži? EDIT: Už som na to prišiel.
Bubák
Profil
Možná pomůže (nezkoušel jsem) Výška podle šířky
To, že použiješ jiný padding-bottom, než 100%, je doufám jasné, protože tvůj obrázek není čtverec, ale obdélník.
radekt
Profil
Bubák:
Zkusil jsem to podle toho. Ale když jsem dal width: 540px; height: 0; padding-bottom: 61%; , mám to posunuté i na velkém rozlišení.
radekt
Profil
Pokud by sem někdo zabloudil a zajímalo ho řešení, tak jsem to kombinací řešení Minimal pure css slider a Plynulá změna obrázků vyřešil následujícím způsobem. Pro stručnější kód neuvádím vendor prefixy. Výsledek je zde

container {
  margin: auto;
  width: 540px;
  max-width: 100%;
  overflow: hidden;
  border: 4px solid;
  border-top-color: #699bc4;
  border-left-color: #38678f;
  border-bottom-color: #699bc4;
  border-right-color: #38678f;
  position: relative;
}
container img {
  position: absolute;
  top: 0;
  left: 0;
  animation: round 15s infinite;
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
}
container img:nth-child(3) {
  animation-delay: 0s;
}
container img:nth-child(2) {
  animation-delay: 5s;
}
container img:nth-child(1) {
  position: relative;
  display: block;
  animation-delay: 10s;
}
 
@keyframes round{ 25%{opacity: 1;} 40%{opacity: 0;};}

img {
  /* obrázky nepřetečou pres nadřízený prvek */
  /* height nutné, aby se obrázek nezdeformoval a zachoval si proporce */
  max-width: 100%;
  height: auto;
}

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: