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

Wyrównywanie zdjęć

Hosting forpsi easy 1 pln
0 głosów
294 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 209 wizyt
0 głosów
1 odpowiedź 546 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ź 168 wizyt
pytanie zadane 28 czerwca 2020 w C# przez Czerenia Początkujący (330 p.)

92,111 zapytań

140,769 odpowiedzi

317,755 komentarzy

61,432 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 801p. - Łukasz Eckert
  2. 793p. - Dawid128
  3. 779p. - CC PL
  4. 767p. - TheLukaszNs
  5. 754p. - Eryk Andrzejewski
  6. 749p. - nidomika
  7. 749p. - Michal Drewniak
  8. 746p. - Mikbac
  9. 726p. - Arkadiusz Waluk
  10. 724p. - rucin93
  11. 722p. - sefirek
  12. 715p. - adrian17
  13. 713p. - Henry Saele
  14. 688p. - the Bielsky
  15. 687p. - Adrian Wieprzkowicz
Szczegóły i pełne wyniki

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.

Uwaga - w dniach od 02.12 do 08.12 trwają Mikołajki (książki drukowane mają rabat -35%, ebooki do -45%). Zaś dodatkowy, specjalny kod zniżkowy: HELMIKOLAJ-10 dla naszych Widzów zapewni Wam oszczędność -10zł dla zamówień powyżej 70zł! Warto korzystać!

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!

...