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

skalowanie obrazka do divów. Jak to wykonać ?

VPS Starter Arubacloud
+1 głos
6,922 wizyt
pytanie zadane 21 października 2015 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
Witam. Mam pytanie odnośnie skalowania divów. Obrazki, jako elementy można skalować zarówno z poziomu html i css (edycja kodu). Natomiast, kiedy chcę zmniejszyć obrazek (dałem na niego w css width:100% i height:auto) ok zmniejsza proporcjonalnie, ale tylko dla obrazka, natomiast dla diva nie ma zmian i obrazek po zmniejszeniu zajmuje 1/3 diva a ten w 2/3 jest pusty. Chciałbym się dowiedzieć, jak zmniejszyć do minimum okna przeglądarki dosłownie wszystko (by była miniatura strony lub po prostu zostały zachowane proporcje.) Pozdrawiam :)

3 odpowiedzi

+1 głos
odpowiedź 21 października 2015 przez babiak Obywatel (1,810 p.)
Dobrze rozumiem, że chcesz po "złapaniu" za krawędź przeglądarki zmiejszać stronę, a ona ma się zachowywać w ten sposób, że obrazki, divy będą się skalować?
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
edycja 21 października 2015 przez DariuszH

O to chodzi. Czy móglbyś pomóc ? :D

komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
Tak wygląda obrazek po zminimalizowaniu. Dolna część jest odłonięta, dopiero po maxymalizacji okienka wyrównuje do diva header.
0 głosów
odpowiedź 21 października 2015 przez Mlody89 Mądrala (6,920 p.)
Nie wiem czy o to ci chodzi ale spróbuj do styli tego diva też dodać height: auto. O ile jest w nim obrazek to powinny się skalować równomernie (obrazek i div), natiomast jeżeli masz w nim tekst to  div będzię się rozciągał w pionie.
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>LIQUID LAYOUT</title>
        
        <link rel="stylesheet" type="text/css" href="nauka.css"/>

    </head>
    <body>

<div id="container">
    <div id="header"><img src="sky4k.jpg"width="100%"></div>
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
#container{
    width:100%;
    height:1858px;
    border:solid 1px;
}

#header{
    max-width:100%;
    max-height:17.6%;
  
}

// Nie działa height:auto. Problem ze skalowaniem diva jest rozwiązany, natomiast wciąż jest ten biały kawałek diva header w trakcie minimalizowania jak i po zminimalizowaniu strony. :)
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)

To jest właśnie ten problem ;)

komentarz 21 października 2015 przez Mlody89 Mądrala (6,920 p.)
przywrócone 21 października 2015 przez Mlody89
Spróbuj dodać do stylu img w css linie vertical-align: top; i zobacz czy pasek zniknie
komentarz 21 października 2015 przez babiak Obywatel (1,810 p.)
Daj kod containera i css od tego i się sprawdzi :)
komentarz 21 października 2015 przez Mlody89 Mądrala (6,920 p.)
Ogólnie rozwiązenie jest takie iż element img jest elementem liniowym tak jak tekst więc ten pasek który ci zostaje na dole ma pomieścić dolną część liter takich jak "p,j,g". Ustawiając vertical-align ustawiasz te litery przy górnej krawędzi dzięki czemu dolny pasek nie jest potrzebny i div się skraca. Możesz to samo uzyskać poprzez ustawienie właściwości display: block, przez co element img będzie traktowany jako element blokowy.
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>LIQUID LAYOUT</title>

        <link rel="stylesheet" type="text/css" href="nauka.css" />

    </head>

    <body>

        <div id="container">
            <div id="header">
                <img src="x.jpg" width="100%"  >
            </div>
            
            <div id="left">lewa kolumna</div>
            
            <div id="center">
            </div>
            <div id="right">prawa kolumna</div>
            <div id="footer">STOPKA STRONY</div>
        </div>

 

    </body>

</html>
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
#container{
    width:100%;
    height:1858px;
    border:solid 1px;
}
#header{
    ???????????? co tu wpisać rady nie pomagają
    
    
}
#left{
    
    background-color:green;
    float: left;
    min-height:1500px;
    width:20%;
        
}

#center {
        float:left;
        background-color:#EEE;
        min-height:1500px;
        width:60%;
        padding-top:0.1%;
        
}

#right{
    float:right;
    background-color:orange;
    min-height:1500px;
    width:20%;
    
}

#footer{
    clear:both;
    background-color:lightblue;
    
    
    
}
u{
    position:relative;
    padding-left:20px;
    
    
}

m{  margin-bottom:2%;
    margin-right:0.1%;
    padding-top:0.1%;
    padding-left:20px;
    float:left;
    
    
}

 

//Proszę. Żadne rady nie pomagają. Może coś pomożesz (pomożecie) :)
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
obrazek do headera ma wymiary:1488x282 px.
komentarz 21 października 2015 przez Mlody89 Mądrala (6,920 p.)
edycja 21 października 2015 przez Mlody89
#header {
  max-width: 1488px;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#header img {
  width: 100%;
  display: block; /* lub zamiennie vertical-align: top;*/
}

http://codepen.io/anon/pen/dYJLar

komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)

 

Super ! Tylko header chciałbym w całości logiem zapełnione (z lewej i prawej). Jest to możliwe ? :) Pouczę się tego kodu od Ciebie. :) Zdziwiony jestem, że można a raczej trzeba jeszcze "#header img" pisać pod stylem #header. Dzięki ! :)

komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)
Dobra mam. Wystarczyło height dociągnąć w #header :)
0 głosów
odpowiedź 21 października 2015 przez Schizohatter Nałogowiec (39,600 p.)
Dejże to online gdziekolwiek. Bo ciągle nie jestem pewien w 100% o co ci chodzi, a na 99% znam rozwiązanie.
komentarz 21 października 2015 przez DariuszH Gaduła (3,100 p.)

http://codepen.io/anon/pen/dYJLar   Kolega powyżej prawie rozwiązał :) Tylko jak dociągnąć logo do lewej i do prawej  bez zmiany jakości ? :)

Podobne pytania

0 głosów
2 odpowiedzi 489 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
2 odpowiedzi 445 wizyt
pytanie zadane 25 lutego 2019 w HTML i CSS przez MrxCI Dyskutant (8,260 p.)
0 głosów
0 odpowiedzi 118 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

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!

...