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

Problem z ustawieniem zdjęć jako statycznych

VPS Starter Arubacloud
+1 głos
151 wizyt
pytanie zadane 24 sierpnia 2021 w HTML i CSS przez ShockWave Bywalec (2,350 p.)
Cześć, mam pytanie czy da radę ustawić zdjęcia jako statyczne. Chodzi dokładnie o to że mam określone tło i wewnątrz tła wstawionych kilka zdjęć. Jednak przy minimalizowaniu okna te zdjęcia się dziwnie rozjeżdżają i chciałbym aby 'kurczyły' się razem z tłem.

Z góry dziękuję i pozdrawiam.
komentarz 24 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Wstaw proszę kod, bo trudno coś doradzić po samym opisie problemu.

komentarz 24 sierpnia 2021 przez ShockWave Bywalec (2,350 p.)
//HTML

<div class="footer">
            </div>
            <div class="footerImg">
                <div style="display: flex; justify-content: space-between;">
                    <div style="margin-top: -130px; padding-left: -50px;">
                        <img src="img/Warstwa 701@1X.png" alt="" style="position: relative;">
                        <img src="img/Warstwa 700@1X.png" alt="" style="position: relative; left: -60px; top: -20px;">
                    </div>
                    <div>
                        <img src="img/Warstwa 704@1X.png" alt="" style="position: relative; left: 70px; top: -30px;">
                        <img src="img/Inteligentny obiekt wektorowy@1X (1).png" alt="" style="position: relative; top: -75px; left: 65px;">
                        <img src="img/Inteligentny obiekt wektorowy@1X (2).png" alt="" style="position: relative; top: -50px; left: 55px;">
                        <img src="img/Warstwa 705@1X.png" alt="" style="position: relative; top: -80px; left: -10px;">
                        <img src="img/Warstwa 702@1X.png" alt="" style="position: relative; top: -50px;">
                    </div>
                </div>

//CSS

.footer
{
    background-image: url(/img/Inteligentny\ obiekt\ wektorowy@1X.png);
    width: 100%;
    height: 540px;
    display: flex;
    align-items: flex-end;
    opacity: 0.2;
    margin-top: 80px;
    z-index: 0;
    background-position: -70px 0px;
}

.footerImg
{
    background-image: url(/img/Prostokąt\ 48\ kopia\ 2@1X.png);
    width: 100%;
    height: 438px;
    margin-top: -425px;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

 

1 odpowiedź

0 głosów
odpowiedź 24 sierpnia 2021 przez VBService Ekspert (251,210 p.)
wybrane 25 sierpnia 2021 przez ShockWave
 
Najlepsza

How to Resize Images Proportionally for Responsive Web Design With CSS

 

...way of resizing images is using the CSS width and height properties. Set the width property to a percentage value and the height to "auto". The image is going to be responsive (it will scale up and down).

2
komentarz 25 sierpnia 2021 przez qax Dyskutant (8,060 p.)

Ponadto, ku sprostowaniu, żeby zachować proporcje obrazka, należy ustawić tylko jego szerokość (RWD), np:

img {
max-width: 50%; /* lub po prostu width: 50%; */
height: auto;
}

EDIT: Nie zauważyłem, że to napisał już VBService

komentarz 27 sierpnia 2021 przez ShockWave Bywalec (2,350 p.)
A jeśli na obrazku czy divie mam ustawione position: absolute to i tak zbytnio to nic nie daje.

Bo ten obrazek przy zwężaniu i tak porusza się szybciej niż inne elementy i nachodzi na nie.

Podobne pytania

0 głosów
2 odpowiedzi 219 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Gaduła (3,130 p.)
0 głosów
1 odpowiedź 115 wizyt
pytanie zadane 1 grudnia 2019 w HTML i CSS przez marek687 Nowicjusz (210 p.)
0 głosów
1 odpowiedź 267 wizyt
pytanie zadane 27 maja 2019 w HTML i CSS przez Apper97 Obywatel (1,380 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 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!

...