• 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.)
#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!

...