Rozmiar diva VS Rozmiar zdjęcia

Question

Takie pytanie ,które zawsze mnie nurtowało podczas robienia responsywnej strony. Załóżmy, że mamy:

Div width 100px height 100px

i zdjęcie ,które ma 100px na 100px

I teraz zmieniam diva na np. 200px na 200px i chciałbym ,aby zdjęcie się przekonwertowało automatycznie do tego rozmiaru. Jest to możliwe? Czy muszę zrobić nową klasę, gdzie zdjęcie będzie miało taki rozmiar jak div?

Answer 1

Zrób Width na 100% i Hight na auto i powinno być ok jak chcesz w ten sposób.

Comments

To zdjęcie się dostosuje do wielkości div'a.

---

Z tym że zdjęcie powinno mieć takie same proporcje bo inaczej będzie ucięte albo rozciągnięte a to niezbyt estetycznie wygląda.

---

np w bootstrapie masz specjalna klasę img-fluid o ile się nie mylę

Answer 2

alternatywnie możesz wrzucić zdjęcia na background, dostosowanie jego rozmiarów jest wtedy o wiele prostsze.

Są jednak spore wady takiego zastosowania. Pod kontem SEO wujek google nie zindeksuje takiego zdjęcia (albo zindeksuje je o wiele gorzej niż zwykły img z atrybutem alt)

Reasumując każde "wartościowe" zdjęcie powinieneś umieszczać tak jak podpowiada Ci @PolGlok natomiast elementy layout-u moim zdaniem dowolnie w zależności od potrzeb.