Zmniejszanie obrazka w divie

pytanie zadane 2 czerwca 2018 w HTML i CSS przez Mash92 Użytkownik (670 p.)

Witam, mam problem z nadchodzącymi na siebie obrazami , mianowicie jak zmieniam rozdzielczośc na mniejszą to obrazy nachodzą na siebie ( są w 2 diviach lewa j prawa strona ) a koncowo jest jeden pod drugim i widać tylko ten pierwszy. Chce uzyskać tak żeby ich rozmiar się nie zmieniał był od początku do końca taki sam.

1	komentarz 2 czerwca 2018 przez shotokan Nałogowiec (39,660 p.) Zapodaj kod.

komentarz 2 czerwca 2018 przez Mash92 Użytkownik (670 p.)

Wysłałem

2 odpowiedzi

odpowiedź 2 czerwca 2018 przez Mash92 Użytkownik (670 p.)

.young-port{
        overflow: hidden;
            padding-left: 0!important;
        .col-lg-12{
            padding-left: 0!important;
            padding-right: 0!important;
            float: left;
            height: 75%;
        }
        .col-lg-5{
             overflow: hidden;
            float: left;
            padding-left: 0;
            padding-right: 0;
            height: 75vh;
            img{
                object-fit: cover;
            }
            
        }
        .col-lg-7{
            text-align: center;
            float: left;
            height: 75vh;
            padding-left: 0;
            padding-right: 0;
            img{
                object-fit: cover;
            }
        }
        .col-md-12{
            padding-left: 0;
            padding-right: 0;
        }
        .up-gallery{

            float: left;
            }
        }

<div class="young-port">

                  <div class="col-lg-12 col-md-12 col-xs-12 up-gallery">
                 <div class="col-lg-5 col-md-4 col-xs-12">
                    <div class="hovereffect-7">
                        <img alt="" class="img-responsive" src="http://kolgrimartphotography.com/wp-content/uploads/2018/05/IGP8011e.jpg">
                        <div class="overlay">
                            <h2>Portrait</h2>
                        </div>
                    </div>
                </div>             
                <div class="col-lg-7 col-md-7 col-xs-12">
                    <div class="hovereffect-7">
                        <img alt="" class="img-responsive" src="http://kolgrimartphotography.com/wp-content/uploads/2018/06/1-2-1.jpg">
                        <div class="overlay">
                            <h2>The Youngest</h2>
                        </div>
                    </div>
                </div>
                
            </div> 
            </div>

komentarz 2 czerwca 2018 przez shotokan Nałogowiec (39,660 p.)

U mnie Twój kod działa poprawnie, tzn. jeden obrazek jest pod drugim i zmiana rozdzielczości nie powoduje zmian.

komentarz 2 czerwca 2018 przez Mash92 Użytkownik (670 p.)

Jak zmniejszysz np do rozdzielczości tebletu czy telefonu to nie ucina od dołu zdj a potem pokazuje tylko pierwsze ?

komentarz 2 czerwca 2018 przez shotokan Nałogowiec (39,660 p.)

Skopiowałem ten kod do pliku a potem ten plik otworzyłem w Firefoxie i wszystko działało, nawet na rozdzielczości telefonu.

komentarz 2 czerwca 2018 przez Mash92 Użytkownik (670 p.)

Może być tak że pisząc w wp i dodałem bibliotekę bootstrapu i po tym może mi ucinać dół przy mniejszej rozdzielczości ? Wiem że kod wydaje się czysty pod tym względem i dziw mnie ten fakt.

komentarz 3 czerwca 2018 przez shotokan Nałogowiec (39,660 p.)

Całkiem możliwe, że jakiś styl, którego tutaj nie zamieściłeś, to powoduje. Najlepiej wykorzystaj narzędzia deweloperskie przeglądarki (F12) i zbadaj dany element strony, sprawdź jakie style dostaje. Tak możesz dojść do tego, który styl powoduje ten błąd.

komentarz 3 czerwca 2018 przez Mash92 Użytkownik (670 p.)

wystarczyło, że zabrałem wartość height: 70vh; i obrazek się nie zmniejszał przy przewijaniu. Nie wiem co to miało na celu.

odpowiedź 2 czerwca 2018 przez Layoutowiec Mądrala (5,470 p.)

Proponuję poczytać o RWD sprawdź poradniki z media queries i wszytko powinno być jasne

komentarz 2 czerwca 2018 przez Mash92 Użytkownik (670 p.)

Rozumiem czym jest media queries, całą stronę mam oparta na tym , wszystkie inne obrazy śmigają dobrze, poustawiane w kolumnach , tylko nie wiem czemu cały div mi się zmniejsza np gry zmieniam rozdzielczośc do dół diva się ucina a inne są w tej samej pozycji , jedynie wiem że te zdjęcia które tam umieściłem są dużej rozdzielczości