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

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

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.

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.

Pokaż 7 poprzednich komentarzy

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 ! :)