| Autor | Zpráva | ||
|---|---|---|---|
| tomas2245 Profil |
Zdravím ako by som mohol spraviť responzivitu týchto obrázkov aby sa na mobile tiež zobrazovali správne tzv. prispôsobovali sa veľkosťou? použiť media query a potom dať max-width daným obrázkom?
a ďalšia vec že ako nastaviť #pozadie bez toho, aby som zadával pevnú výšku a šírku v pixeloch? lebo keď nedám width a height tak to pozadie ( obrázka č.2) sa nezobrazí..pixle nechcem dávať preto lebo potom sa to pri zmenšení stránky neprispôsobuje... musí to byť v % ale nezobrazuje sa ten obrázok bez px... <style>
#nalavo-obrazok {
float:left;
max-width: 100%;
border: 5px solid #008000;
margin: 8px 0px 0px 13px;
}
#pozadie {
background: url(pozadie.jpg);
}
#napravo-obrazok {
float:right;
max-width: 100%;
border: 5px solid #008000;
margin: 8px 0px 0px 13px;
}
.img-responsive {
max-width: 100%;
}
</style>
<div id="pozadie">
<div id="nalavo-obrazok">
<img src="obrazok-nalavo.jpg" class="img-responsive">
</div>
<div id="napravo-obrazok">
<img src="obrazok-napravo.jpg" class="img-responsive">
</div>
</div>takto to má vyzerať: 
|
||
| Tomáš123 Profil |
#2 · Zasláno: 6. 11. 2018, 18:38:28
tomas2245:
Živá ukážka riešenia: Živá ukázka Podstatnou časťou funkčnosti riešenia je odstránenie (resp. zneviditeľnenie) bielych znakov medzi dvoma divmi. Existuje niekoľko ďalších možností ako toto zabezpečiť, ale žiadnu vhodnú si teraz nevybavujem. Veľkosť písma radšej nenuluj (v určitých prípadoch už nikdy neobnovíš pôvodnú harmóniu jednotiek).
Ak potrebuješ centrovať aj vertikálne, napríklad jeden z dvojice rôzne vysokých obrázkov, použi tabuľkové hodnoty displayu.
|
||
| tomas2245 Profil |
Tomáš123:
ďakujem funguje :) ešte jedna otázka, pridal som tretí obrázok na stred, funguje to keď som zmenšil #pozadie div na width: 32.9% miesto 50%... tak tri obrázky sa zobrazia: naľavo, v strede a napravo ale pri zmenšení okna na 700px sa ten tretí obrázok dá už pod to... ako by sa to dalo prosím vyriešiť? Musel som tam zakomponovať aj tretí obrázok (stredový) ktorý bude slúžiť ako logo, predtým logo bolo v pozadí ale na mobile to logo nebolo vidieť lebo to pozadie sa neprispôsobovalo veľkosti okna... <style>
#pozadie div {
text-align: left;
display: inline-block;
width: 32.9%;
box-sizing: border-box;
}
div #napravo-obrazok {
text-align: right;
}
div #stred-obrazok {
text-align: center;
}
#pozadie {
padding: 8px;
background: url(http://caputachryzantemy.sk/addony/obrazky/hlavna/logo.png) center;
}
.img-responsive {
border: 5px solid #008000;
max-width: 100%;
}
</style>
<div id="pozadie">
<div id="nalavo-obrazok">
<img src="obrazok.jpg" class="img-responsive">
</div>
<div id="stred-obrazok">
<img src="obrazok.jpg" class="img-responsive">
</div>
<div id="napravo-obrazok">
<img src="obrazok.jpg" class="img-responsive">
</div>
</div> |
||
| Tomáš123 Profil |
#4 · Zasláno: 6. 11. 2018, 21:11:47
tomas2245:
Pozadie sa vie prispôsobiť veľkosti obalového prvku. Stačí nastaviť background-size. Veľkosť obalového prvku ani okna sa pri súčasnom riešení v čistom CSS nevie prispôsobiť veľkosti pozadia. Zrejme by na to bolo treba JavaScript.
|
||
| tomas2245 Profil |
#5 · Zasláno: 6. 11. 2018, 21:28:09
super, vďaka
|
||
|
Časová prodleva: 5 let
|
|||
0