Problem z ustawieniem zdjęć jako statycznych

Question

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.

Comments

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

---

//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;
}

 

Answer 1

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).

Comments

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

---

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.