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

Wyrównywanie zdjęć

Cloud VPS
0 głosów
819 wizyt
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

+2 głosów
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

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.
komentarz 26 sierpnia 2018 przez FroGiS Użytkownik (810 p.)
dobra mój błąd zapomniałem usunąć height:auto z poprzedniego przykładu teraz wszystko działa. Dzięki ;D
0 głosów
odpowiedź 26 sierpnia 2018 przez Eliro Stary wyjadacz (12,160 p.)
A nie łatwiej byłoby zamiast width: 25% dać po prostu wartość w pikselach, która będzie równa połowie wysokości obrazka 1?
komentarz 26 sierpnia 2018 przez FroGiS Użytkownik (810 p.)
nie bo po zmiejszeniu strony wygląda to okropnie ;D

Podobne pytania

0 głosów
2 odpowiedzi 366 wizyt
0 głosów
1 odpowiedź 788 wizyt
pytanie zadane 20 września 2017 w HTML i CSS przez Patryk Kożuchowski Początkujący (460 p.)
+1 głos
1 odpowiedź 488 wizyt
pytanie zadane 28 czerwca 2020 w C# przez Czerenia Początkujący (330 p.)

93,482 zapytań

142,414 odpowiedzi

322,761 komentarzy

62,894 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

Kursy INF.02 i INF.03
...