• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

IMG 100% szerokości 100% wysokości SKALOWANIE

VPS Starter Arubacloud
0 głosów
669 wizyt
pytanie zadane 21 marca 2017 w HTML i CSS przez bat_kuba Użytkownik (600 p.)
edycja 21 marca 2017 przez bat_kuba
Witam,
prosiłbym o wskazówkę co mam poprawić w moim kodzie aby zdjęcie w klasie .slider było pełnych rozmiarów i skalowało się poprawnie. Prosiłbym również o podpowiedź co zrobić, aby zdjęcie z klasy .slider było dobrze umieszczone na stronie. Proszę również o wskazanie ewentualnych innych błędów w kodzie.

Wklejam link do kodu https://codepen.io/bat_kuba/pen/RpMZoa?editors=1010

Z góry dziękuję za poświęcony czas i odpowiedzi :D
komentarz 21 marca 2017 przez Codeboy Stary wyjadacz (12,120 p.)
co masz na myśli mówiąc pełnych rozmiarów?
komentarz 21 marca 2017 przez bat_kuba Użytkownik (600 p.)
Tzn że jak wkleję zdjęcie do klasy .slider nieważne jakich rozmiarów to bd się zawsze wyświetlało 100%x100% i się automatycznie skalowało :) I zapomniałem dodać żeby było w dobrym miejscu na stronie bo w tej chwili mi się posypało i nie wiem co zrobić :(

1 odpowiedź

0 głosów
odpowiedź 21 marca 2017 przez Codeboy Stary wyjadacz (12,120 p.)

height: 100% zadziała tylko wtedy gdy element, który jest rodzicem (w tym wypadku div .slider) ma ustawioną stała wartość (ustawiłem na 700px). Dodatkowo to:

left: 100%;
top: 100%;

position: absolute;
transform: translate(-100%, -50%);

dla obrazka jest całkowicie zbędne i psuło Ci cały layout.

Zobacz: https://codepen.io/anon/pen/xqWLyb

komentarz 21 marca 2017 przez bat_kuba Użytkownik (600 p.)
Chodzi mi trochę o co innego :)

Body mam ustawione na 1000px i chciałbym aby zdjęcie w klasie .slider wyświetlało się na całą szerokość okna przeglądarki i się odpowiednio skalowało :)
komentarz 21 marca 2017 przez Codeboy Stary wyjadacz (12,120 p.)
Czemu więc ustawiasz body na 1000px jak chcesz mieć elementy na full screen? :O
komentarz 21 marca 2017 przez bat_kuba Użytkownik (600 p.)
bo myslalem ze tak jest poprawnie x)

czyli lepiej dla kazdego diva itp oddzielnie ustalic szerokosc ? XD
komentarz 21 marca 2017 przez Codeboy Stary wyjadacz (12,120 p.)

body zostaw w spokoju ;) stylizuj elementy osobno. Podobny efekt uzyskasz jeśli ustawisz sobie width elementu na 70% (względem body, które ma 100%) + do tego margin: auto.

Ewentualnie możesz pobawić się flexboxem, którym ogarniesz środkowanie elementów itd, ale to więcej do ogarniania :)

Podobne pytania

0 głosów
1 odpowiedź 652 wizyt
pytanie zadane 19 maja 2019 w HTML i CSS przez husarbilu Początkujący (370 p.)
0 głosów
0 odpowiedzi 118 wizyt
+1 głos
2 odpowiedzi 266 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...