Afbeelding volledige grootte.

[Strunkie]

Allo allemaal,

Ik wil voor mijn website een <img> volledige grootte hebben (als achtergrond).
De volgende CSS doet het in de breedte wel goed maar in de hoogte niet.

code:

.test{
    min-height:100%;
    height:auto !important;
    height:100%;
    
    min-width:100%;
    width:auto !important;
    width:100%;

}

Weet iemand hoe je dit wel goed kan doen zonder al te veel fratsen met jQuery ed?

Kiwie

[RobIII]

Heb je al eens gewoon gezocht >> Hoppa

[ Voor 17% gewijzigd door RobIII op 22-11-2011 10:41 ]

[_Rene_]

Als de afbeelding als achtergrond moet kun je hem zo in de css megeven;

code:

.test
{
background-image:url('imgage.png');
background-repeat:no-repeat;
background-position:center top;
}

[ Voor 4% gewijzigd door _Rene_ op 22-11-2011 10:46 ]

[Bosmonster]

100% is relatief. Dus 100% van WAT wil je hem hebben? Is die container (bijvoorbeeld de body) wel 100%?

Standaard is je document namelijk niet de hoogte van je scherm, maar de hoogte van de content. Je scherm is er slechts om dat document weer te geven Schermhoogte is dus iets dat altijd geforceerd moet worden.

[RobIII]

_Rene_ schreef op dinsdag 22 november 2011 @ 10:40:
Als de afbeelding als achtergrond moet kun je hem zo in de css megeven;
test
{
background-image:url('imgage.png');
background-repeat:no-repeat;
background-position:center top;
}

En hoe is dat relevant voor de TS Verder: als je code post gebruik dan code tags a.u.b.

[ Voor 19% gewijzigd door RobIII op 22-11-2011 10:43 ]

[Mr. Awesome]

Na even zoeken binnen GoT (Dankzij de URL van RobIII), kwam ik op topic

Daarin kun je weer een linkje vinden naar http://css-tricks.com/345...ll-page-background-image/ wat volgens mij precies doet wat jij wilt.

Edit: Rob was me al weer voor met een edit.

[ Voor 7% gewijzigd door Mr. Awesome op 22-11-2011 10:43 ]

[_Rene_]

@RobIII; Hij wil een afbeelding als achtergrond op volledige grootte. Met een image tag blijft hij in je document. Als je het als achtergrond gebruikt komt er meestal wat overeen toch? ALs achtergrond instellen is dan de eenvoudigste oplossing. je kunt hem dan ook meescalen naar je pagina.

[RobIII]

_Rene_ schreef op dinsdag 22 november 2011 @ 10:46:
je kunt hem dan ook meescalen naar je pagina.

Ja, en dat was nou net de crux die jij weg liet Verder heeft ts de .test-class op de img staan; een img (ook nog eens) een background geven is nou niet bepaald een oplossing

[ Voor 23% gewijzigd door RobIII op 22-11-2011 10:50 ]

[Strunkie]

Ik zei in mijn startpost <img> tag dus ik kan het niet oplossen met background.

[Strunkie]

_Rene_ schreef op dinsdag 22 november 2011 @ 10:46:
@RobIII; Hij wil een afbeelding als achtergrond op volledige grootte. Met een image tag blijft hij in je document. Als je het als achtergrond gebruikt komt er meestal wat overeen toch? ALs achtergrond instellen is dan de eenvoudigste oplossing. je kunt hem dan ook meescalen naar je pagina.

Dat is niet echt een oplossing imv. het inladen met jQuery.

[Mr. Awesome]

Waarom wil je persé de <img>-tag gebruiken dan?

[Strunkie]

hyptonize schreef op dinsdag 22 november 2011 @ 10:55:
Waarom wil je persé de <img>-tag gebruiken dan?

Dit is de jQuery code speciaal voor het inladen van mijn afbeelding.

code:

$(function () {
  var img = new Image();
  
  $(img)
    .load(function () { 
      $(this).hide();
    
      $('#loader')
        .removeClass('loading')
        .append(this);
    
      $(this).fadeIn();
      $(this).addClass('test')
    })
    
    .error(function () {
    })
    
    .attr('src', 'http://www.rogiervisserfotografie.nl/wp-content/uploads/bos.jpg');
});

[OkkE]

code:

.attr({'src':'image.jpg', 'height':dh+'px', 'width':dw+'px'});

Als je toch Javascript gebruikt, kan je daarmee ook de width en height van de image instellen. Alleen nog even de width en height van je document ophalen.

[ Voor 35% gewijzigd door OkkE op 22-11-2011 11:40 ]