| 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 |
#3 · Zasláno: 26. 12. 2014, 11:08:07
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 |
#4 · Zasláno: 26. 12. 2014, 12:21:58
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í.
|
||
|
Časová prodleva: 15 dní
|
|||
| 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;
} |
||
|
Časová prodleva: 9 let
|
|||
0