Reszponzív kép sr blogban

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!

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;
}

Utóbbi, CSS témával kapcsolatban Mézes Andrást vagy Márthon Gergelyt keresd, ők az igazi ismerői ezeknek a varázslatoknak. 😉