• 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ć ?

+1 głos
6,102 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,940 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,940 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,700 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 220 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
2 odpowiedzi 211 wizyt
pytanie zadane 25 lutego 2019 w HTML i CSS przez MrxCI Dyskutant (8,280 p.)
0 głosów
0 odpowiedzi 69 wizyt

86,486 zapytań

135,242 odpowiedzi

300,488 komentarzy

57,234 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...