Reszponzív kép sr blogban. Tök jó lenne, igaz? Nem vészes feladat. Mutatok 3 lehetséges megoldást. Válaszd ki a Neked tetszőt!
A ShopRenter szerintem az egyik legjobb bérelhető webáruház, ez a pár tipp pedig majdhogynem kötelező anyag egy webáruház csinos kinézetéhez. (Mert bizony a blog nem egy kicker image modul…)
Ha már az admin felületen vagy, a Tartalom – Hírek, blogbejegyzések – Szöveges tartalmak menüpontokkal jutsz el a blogig. Dolgozzunk egy kicsit, hogy tudatosan asztali és mobil nézetben egyaránt jól nézzen ki az oldalad. A lenti néhány módszer lehetővé teszi, hogy a blogodban lévő képek mobilon se lógjanak ki az oldalról, és hogy igényesen jelenjenek meg az írásodban.
1. lehetőség
Az egyik megoldás, ha a kép feltöltésekor a kép tulajdonságainál a szélességet 100%-ra állítod.
2. megoldás
Forráskódban bütykölsz egyesével, például így:
<img alt=”Polc – Váróczi Üzletberendezés” src=”http://uzletberendezes.shoprenter.hu/custom/uzletberendezes/image/data/blogkepek/20150922/polc.jpg” style=”width: 100%; max-width: 500px; float: right; margin: 5px;” />
Ez a kép így jobbra igazított, 5 pixelnyi margóval pedig bal oldalon teljes magasságban van szöveg. A szélessége nagy képernyőn maximum 500 pixel, de mobilon 100%. Jópofa, nem? 😉
Reszponzív kép sr blogban 3.
Vagy ha minden képnél ugyanazt szeretnéd, egyedi CSS-be beilleszthetsz egy ilyesmit:
img, embed, object, video {
max-width: 100%;
height: auto !important;
vertical-align: middle;
border: 0;
}
Ez is elengedhetetlen anyag egy webáruház tulajdonosnak, szerezz látogatókat a webáruházadba:
