responsywny obrazek z napisem

Question

Chciałbym stworzyć responsywny obrazek z napisem. Ten kod działa prawidłowo: https://codepen.io/reti/pen/VwKPRVo Napis znajduje się zawsze w prawym dolnym rogu obrazka, niezależnie od jego wielkości i orientacji (na dole znajdują się dwa przyciski, które zmieniają wielkość i orientację). Podejrzewam jednak, że można to łatwiej napisać używając tylko css bez JS. Ale nie wiem jak.

Answer 1

W swoim pytaniu chcę zwrócić przede wszystkim uwagę na to, że na obrazku jest napis i on ma być zawsze w prawym dolnym rogu obrazka. Jak to zrobić najprościej, najlepiej tylko za pomocą HTML i CSS?

Obrazek i tekst zamknij w divie. Niech div ma wymiary odpowiadające wymiarom obrazka (div ma być wielkości obrazka), nadaj mu position: relative. Na tekst daj position: absolute, bottom: 0, right: 0.

Czy chodziło o to rozwiązanie? Czemu chcesz unikać media queries?

Comments

Próbowałem tego już wcześniej: https://codepen.io/reti/pen/QWKpOWb tylko nie wiem jednej rzeczy. Piszesz tak:

Niech div ma wymiary odpowiadające wymiarom obrazka (div ma być wielkości obrazka)

Wydaje mi się, że sam CSS powinien sobie poradzić z tym bez problemu. Tylko jak to napisać? Media querries są mi w projekcie niepotrzebne (musiałbym Cię tutaj wtajemniczyć w cały w projekt). Chyba, że pomogłyby mi w jakiś rozwiązać ten konkretny problem z pozycją tekstu na obrazku, jednak nie bardzo umiem to sobie wyobrazić.

---

Literówka: 

.img-container {
  position: realtive;
}

Domknięcie jest niepotrzebne:

</img>

 

---

Dobrą praktyką jest konsekwentność, czyli jeśli piszesz kod w pewnym stylu to się go należy potem trzymać w całym projekcie. Przy nadawaniu klas w html raz używasz class="xxx" a raz class='xxx' - mnie osobiście kłuje to w oczy.

Albo ten tekst, który chcesz pozycjonować w obrazku, nie widzę sensu dawania go w <div> a w <span>. Słyszałem, że różnorodność znaczników i ich odpowiednie wykorzystanie wpływa pozytywnie na SEO, nie wiem czy to prawda - jeśli się mylę to może mnie ktoś poprawić.

---

@CubeStorm dzięki, literówkę poprawiłem. Tekst wskoczył na właściwe miejsce, ale obrazek dalej nie jest responsywny tak jak w podanym przeze mnie przykładzie na początku: https://codepen.io/reti/pen/VwKPRVo

---

Dobrą praktyką jest konsekwentność, czyli jeśli piszesz kod w pewnym stylu to się go należy potem trzymać w całym projekcie. Przy nadawaniu klas w html raz używasz class="xxx" a raz class='xxx' - mnie osobiście kłuje to w oczy.

Albo ten tekst, który chcesz pozycjonować w obrazku, nie widzę sensu dawania go w <div> a w <span>. Słyszałem, że różnorodność znaczników i ich odpowiednie wykorzystanie wpływa pozytywnie na SEO, nie wiem czy to prawda - jeśli się mylę to może mnie ktoś poprawić.

Tak wiem, sorry, to tylko szkic. W tej chwili nie zwracam na to uwagi, ale poprawię. Nie wiem czemu, ale w  HTML i CSS raczej spotykam się z tym cudzysłowem: " Na znacznikach się dobrze nie znam. Jestem początkujący. W tej chwili nie skupiam się bardzo na SEO, ale dzięki za zwrócenie na to uwagi.

---

Obrazek ma width: 100%, height: 100% czyli swoją wielkość dostosowuje do diva, w którym się znajduje. Następnie ten div dostosowuje swoją wielkość do wielkości ekranu lub do rodzica jeśli takowy istnieje, w twoim przykładzie .swiper-slide-container ma wartość width: 80% czyli zawsze ma 80% wielkości z .swiper-slide-wrap, który zajmuje całość strony.

---

Niby to wiem, ale nie potrafię w tej chwili znaleźć sposobu na to, żeby img zachowywał się tak jak w podanym na początku przykładzie. Na prawdę nie mam żadnego pomysłu. Mógłbyś mi proszę powiedzieć, co trzeba konkretnie zrobić?

---

body { width: 100%; // Ciało strony (body) będzie miało szerokość okna przeglądarki } .wrapper { width: 50%; // Wrapper będzie miał połowę szerokości swojego rodzica, czyli ciała strony } img { width: 100%; // Obrazek będzie miał szerokość swojego rodzica, czyli wrappera } W tym przykładzie obrazek zawsze będzie miał połowę szerokości okna przeglądarki. Bardziej nic się nie da wytłumaczyć. Do rozwiązania swojego problemu musisz dojść sam, pomoc nie polega na dawaniu gotowych rozwiązań.

---

https://codepen.io/reti/pen/abmJEwr

Dzięki. Prawidłowo zachowują się tylko małe obrazki, ale duże dalej nie są responsywne jak w pierwszym przykładzie.

Answer 2

Możesz zrobić to w css używając @media: https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries oraz używając vw i vh(do określenia szerokości i wysokości obrazak, elementów dokoła itd.): https://www.w3schools.com/cssref/css_units.asp Aby vw i vh działało musisz dodać do head viewport: https://www.w3schools.com/css/css_rwd_viewport.asp

Comments

Dzieki za odpowiedź. Znam to wszystko. To są tylko sposoby na inne potraktowanie zagadnienia responsywności. Nie tego szukam. Media queries na pewno nie chcę stosować, bo nie pasuje mi to do projektu. Problem responsywności czcionki rozwiązałem w projekcie zupełnie inaczej: https://github.com/adactio/FitText.js. Polecam.

W swoim pytaniu chcę zwrócić przede wszystkim uwagę na to, że na obrazku jest napis i on ma być zawsze w prawym dolnym rogu obrazka. Jak to zrobić najprościej, najlepiej tylko za pomocą HTML i CSS?