Wyrównywanie zdjęć

pytanie zadane 26 sierpnia 2018 w HTML i CSS przez FroGiS Użytkownik (810 p.)
edycja 26 sierpnia 2018 przez FroGiS

Siema postanowiłem stworzyć stronę internetową póki co moja wygląda tak https://scr.hu/g6ZMzp

a chciałbym aby 2 i 3 obrazek miały 50% wysokości obrazka 1, ale nie wiem jak to zrobić.

html:

<!DOCTYPE html>
<html lang=pl>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-witdth,inital-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/Icon.png" />
    <title>Nostale Wiki</title>
    <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div id="wrapper">
            <header id="siteHeader" class style="width: 104px">
                <a id="logo" title="Nostale" href="Index.html"></a>
                <a id="navbar" title="nawigacja"></a>
            </header>
            <section>
                <img id="img1" src="Images/img1.jpg" alt="Główna strona nostale" />
                <img id="img2" src="Images/img2.jpg" alt="Glacernon">
                <img id="img3" src="Images/img3.jpg" alt="potwory">
                
            </section>
            <footer>
            
            </footer>
        </div>
    </body>
</html>

css:

* {
    padding: 0;
    margin: 0;
    font-family: Roboto;
    box-sizing: border-box
    
}
#siteHeader{
    position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	min-width: 104px;
    color: #12a6ec;
	background-color: #034a96;
	display: block;
	float: left;
	overflow: hidden;
	width: 104px;
}
body {
	margin-left: 104px;
    background-color: grey
    
}
#img1{
    width: 50%;
    float: left
}
#img2{
    width: 25%;
    float: left;
    
}
#img3 {
    width: 25%;
}

komentarz 26 sierpnia 2018 przez Eliro Stary wyjadacz (12,160 p.)

Wstaw kod

komentarz 26 sierpnia 2018 przez FroGiS Użytkownik (810 p.)

Dodałem

2 odpowiedzi

odpowiedź 26 sierpnia 2018 przez thryndl Nałogowiec (30,470 p.)
wybrane 26 sierpnia 2018 przez FroGiS

Najlepsza

Musisz zamknąć obrazki w kontenerze z określoną wysokością, żeby te mogły odziedziczyć wysokość, następnie ustawić im procentową wartość.

Przykład: codepen.io

Pokaż 7 poprzednich komentarzy

komentarz 26 sierpnia 2018 przez FroGiS Użytkownik (810 p.)

po dodaniu height: auto; do img nic się nie dzieje a usunięcie float: left; psuje ułożenie tzn obraz nr 3 przechodzi pod obraz nr 1 a obraz nr 2 spada na dół.

komentarz 26 sierpnia 2018 przez thryndl Nałogowiec (30,470 p.)

No tak, bo u Ciebie obrazki mają różne rozmiary, dlatego nie ma zamierzonego efektu.

Możesz jeszcze ustawić wysokość obrazkom za pomocą jednostki viewport

Tylko musisz poeksperymentować z wartościami, żeby obrazki miały zamierzony rozmiar.

komentarz 26 sierpnia 2018 przez FroGiS Użytkownik (810 p.)

zmienianie wartości tak jak w twoim przykładzie również nic nie daje

1	komentarz 26 sierpnia 2018 przez thryndl Nałogowiec (30,470 p.) Niemożliwe. Przeładowałeś cache przeglądarki? Jeśli korzystasz z jakiegoś serwera to odśwież stronę za pomocą CTRL + F5.