| Autor | Zpráva | ||
|---|---|---|---|
| hellboy80 Profil |
Chtel bych se zeptat. Pridal jsem si do jedny sablony pro Wordpress druhy zapati. Do ně jsem umístil dvě loga (přímo do footer.php). Problém je ten, že to západí není responzivní (jako zbytek webu). Když zúžím prohlížeč na vertikální orientaci, tak se zúží celý web, ale ty loga přetékají. Stejně tak přetékají, když je na web uploadnu ve větší velikosti. Rád bych aby se ty loga držely v hranicích toho zápatí. Jak se to dá nejjednodušejí vyřešit? Díky předem za pomoc!
EDIT: Tak jsem to zkusil takhle. Vypada to, ze to funguje. Neprisel jsem na to, jak tu udelat ve style.css, tak jsem to zkusil v tom footer.php. Je to tak spravne? Jeste by me ale zajimala jedna vec - netusim, jak velky ty loga maj byt, jelikoz nevim, jaky budou mit navstevnici rozliseni monitoru. Rad bych je tedy nahral pro jistotu vetsi, ale chci, aby se drzely v sirce toho zapati. Je na to nejakej prikaz? <footer id="footer2" class="clearfix" role="contentinfo">
<div id="footer-text">
<a href="http://www.example.com"><img src="http://web.cz/logo1.gif" style="max-width:100%;height:auto;"></a> <img src="http://example.com/logo2.gif" style="max-width:100%;height:auto;">
</div> |
||
| Tomáš123 Profil |
#2 · Zasláno: 24. 3. 2016, 11:20:22
hellboy80:
„Je to tak spravne?“ Teoreticky. Pohľadaj ale radšej ten CSS súbor a prepíš deklaráciu priamo tam: #footer2 #footer-text img { /*Nech je selektor silný; prvé ID môžeš vynechať*/
max-width: 100%;
height: auto;
}„netusim, jak velky ty loga maj byt, jelikoz nevim, jaky budou mit navstevnici rozliseni monitoru.“ Neplatí, že čím väčší obrázok, tým lepšie. Obrovský obrázok je nevhodný pre pomalé a často aj dátovo obmedzené mobilné pripojenia. Bolo by ideálne nejako to striedať. Z článku mi príde najjednoduchšie použiť @media zápisy:
.img {background-image: url(obrazok-mobile.png);} /*Pre mobilné rozlíšenia a staršie prehliadače nepodporujúce media queries, alebo s vypnutým alebo nedostatočne podporovaným JS*/
@media screen and (min-width: 480px) {
.img {background-image: url(obrazok-tablet.png);}
}
@media screen and (min-width: 720px) {
.img {background-image: url(obrazok-laptop.png);}
}
@media screen and (min-width: 1366px) {
.img {background-image: url(obrazok-desktop.png);}
}
.img.old-browser { /*V starších prehliadačoch môže zakročiť JavaScript a priradiť triedu old-browser, aby sa zobrazil obrázok pre notebook namiesto obrázku pre mobil*/
background-image: url(obrazok-laptop.png);
}Background sa na obrázku (značke <img>) prejaví iba ak sa nepodarí načítať súbor. Bolo by teda nutné používať nejaký iný prvok (napríklad <span>; dôvod) a nastaviť mu požadované vlastnosti obrázka (display: inline-block) alebo neudávať atribút src a neobrať sa tak aspoň o kamarátstvo s vyhľadávačmi (snáď).
Problémom je, že každý takto responzívny obrázok by musel mať svoju triedu v CSS súbore a musel by si poznať jeho rozmery. Pre pohodlie by bolo nutné použiť JavaScript a to už radšej meniť rovno adresu v src na základe šírky zobrazovacej plochy. S tým, ale neviem konkrétne poradiť.
Normálne by som použil obyčajný obrázok strednej kvality a dátovej objemnosti a ďalej nič neriešil. Ak sa ale jedná iba o dva nutne prispôsobivé, pri každom rozlíšení čo najkvalitnejšie a najúspornejšie, obrázky, šlo by to strpieť. „Rad bych je tedy nahral pro jistotu vetsi, ale chci, aby se drzely v sirce toho zapati.“ To si už vyriešil deklarovaním max-width.
|
||
| hellboy80 Profil |
#3 · Zasláno: 24. 3. 2016, 15:39:58
Ok, diky :)
|
||
|
Časová prodleva: 8 let
|
|||
0