[CSS] responsywny img opakowany w diva, który ma zawsze taki sam rozmiar jak img Opcje

[stellatus]

Mam taki kod: https://codepen.io/reti/pen/ExgZgoa

Img dostosowuje się do rozmiaru okna. Nie powiększa się jednak, jeżeli jego rozmiar jest mniejszy niż rozmiar okna. Na dole są przyciski, które przełączają 4 rózne przypadki obrazków. Wszystko działa poprawnie. Teraz chciałbym włożyć img w diva i ten div ma mieć zawsze takie same rozmiary jak img. Wydawało mi się to proste, ale siedzę już nad tym dość długo i nie mam pojęcia jak to zrobić.

[trueblue]

Który z tych <div> ma mieć taką samą szerokość jak obrazek? Co z przyciskami na dole?

[stellatus]

Dzięki za odpowiedź. Tego diva, w którym ma być img trzeba utworzyć. Zrobiłem to tutaj:
https://codepen.io/reti/pen/NWRdRme
Ma on klasę 'img-container'. Nie wiem co dalej. Próbowałem na różne sposoby. Obydwa przyciski przełączają pomiędzy układem portrait i landscape. Pierwszy przełącza obrazki, których rozmiar jest większy od okna, a drugi obrazki, których rozmiar jest mniejszy od okna.

[trueblue]

W tym przypadku obrazek nie jest responsywny. Ale dodany <div> ma rozmiar tego obrazka. Dodając height: 100% do tego elementu dopasowuje się do obrazka, a ten jest responsywny.

[stellatus]

Sorry, chyba nie wyraziłem się precyzyjnie. Ten div ma mieć takie rozmiary jak img w pierwszym przykładzie, we wszystkich czterech przypadkach: big: portrait i landscape, jak również small: portrait i landscape. Tego height: 100% też próbowałem, ale to działa (wizualnie) tylko dla big. W przypadku small ten div nie ma rozmiarów takich jak img.

Ten post edytował stellatus 13.12.2020, 11:46:15

[trueblue]

Ten div ma służyć tylko jako ramka do obrazka?

[stellatus]

Nie, w nim będzie jeszcze inny div - napis na obrazku. Tło i padding dodałem, żeby było widać jaki rozmiar ma div.

Własciwie to chyba źle określiłem swój cel. Chodzi mi o umieszczenie napisu na obrazku. Chcę też sformatować ten napis: nadać mu tło, kolor czcionki i border. Próbowałem z pseudoelementem after, ale nie działa i z tego co rozumiem (https://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements/6949190#6949190) nie ma prawa działać. Ale after można przypisać do jakiegoś innego pustego elementu np. span i zagnieździć go w img. Później za pomocą JS sterować jego pozycją względem obrazka podczas zdarzenia onresize. Wygląda mi to na zbyt skomplikowane rozwiązanie jak na taki prosty problem. W każdym razie spróbuję w ten sposób.

Działa tylko, że na pewno da się to zrobić prościej:
https://codepen.io/reti/pen/VwKPRVo

Ten post edytował stellatus 14.12.2020, 11:33:28

[trueblue]

A znasz rozmiary zdjęć przed ich wyświetleniem? Z tego co widzę musisz wstawiać w atrybut "alt" wartość odpowiadającą za proporcje obrazka. Pytam, bo jeśli znasz, to da się to zrobić inaczej.

P.S. https://kawalekkodu.pl/yeti-jedni-widzieli-...element-dla-img

[stellatus]

15.12.2020:
Dzięki, tak, znam rozmiary obrazków, które będą ładowane. Zatem jak to zrobić?

Artykuł przeczytałem. Moze na razie niezbyt dokładnie. Widzę, że jest tam wzmianka o img:before. Piszesz, że to nie działa na Edge, Safari oraz iOS (Chrome i Safari). U mnie na Firefox to też nie działa.

18.12.2020:
Można to też zrobić bez pseudoelementu. Tylko, że diva z napisem trzeba wrzucić np. do body. Sterowanie jego pozycją jest analogiczne jak w podanym przeze mnie na początku przykładzie. Nie mam teraz czasu napisać teraz tego w codepen, ale dokładnie tak mam w projekcie. W wolnej chwili to napisze i wrzucę na codepen.

Ten post edytował stellatus 18.12.2020, 12:38:27