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.

Reszponzív kép sr blogban – Kép tulajdonságai

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:

Reszponzív kép ShopRenter blogban

Facebook reklám