[CSS] Afbeelding maximaliseren zonder crop

[kamerplant]

Hallo,

Ik ben bezig met een website en kom tegen iets waar ik niet uit kom - terwijl het vast heel simpel is.

Dit is wat ik wil:
1. Het menu bovenin is 55px, die is fixed en moet altijd bovenin blijven (dat doet het nu );
2. De afbeelding moet meeschakel met het formaat van het scherm (dat doet het nu )
3. De div "projecten" moet in zijn geheel zichtbaar zijn in de browser van de client. De div "tekst" moet altijd onderin staan en de foto moet alle overige ruimte zo volledig mogelijk innemen. (dat doet het nu niet )
4. Uiteindelijk komt er meer content onder deze pagina, die mag pas zichtbaar worden als er wordt gescrolt.

Ik loop echt te prutsen en kom er niet echt uit. Kan iemand me op weg helpen?

Als dit niet in puur CSS kan is jQuery okay. jQuery ga ik sowieso gebruiken. jQuery wordt nu al included.

1. Online demo
2. Online source code inzien
3. Source downloaden

[ Voor 4% gewijzigd door kamerplant op 17-01-2014 18:58 ]

[Douweegbertje]

1: niet bij mij, want hij blijft niet bovenin.

In elk geval heb ik hem even gemaakt:

http://jsfiddle.net/Lacpr/2/

Ik denk dat de code voor zichzelf spreekt, anders hoor ik het wel.

[kamerplant]

Haha dat was inderdaad heel simpel. Ik dacht dat 'bottom: 0px' ervoor zou zorgen dat hij altijd vastgeplakt blijft aan de onderkant dus daarom had ik dat niet eens geprobeerd .

Mbt 1, tijdens het testen heb ik idd iets gesloopt want ik zie idd dat hij dat niet meer doet. Maar dat lukt wel om te fixen

Dank je

[ Voor 25% gewijzigd door kamerplant op 17-01-2014 19:37 ]

[Metian]

Niet vergeten om .header een z-index mee te geven, anders gaat de tekst die onderaan staat over de header heen. (mocht je het toevallig ooit willen gebruiken op die manier).

[ Voor 18% gewijzigd door Metian op 17-01-2014 19:58 ]

[kamerplant]

Tnx Metian, inderdaad.

Ik heb het nog niet helemaal voor elkaar. De afbeelding sized verkeerd mee. Ik heb de JSFiddle geüpdatet.

http://jsfiddle.net/Lacpr/4/

Met img width = 100% is de afbeelding soms te hoog:


Door ook een max-height mee te geven werkt het op zich wel, maar is de aspect ratio weg.


Croppen zou een oplossing zijn, maar dat wil ik liever niet. Ik dat hij uiteindelijk horizontaal en verticaal in het midden staat, zo groot mogelijk, zonder dat het gecropt hoeft te worden.

[stane]

Is

code:

background-size: cover;

geen optie?

[kamerplant]

Goede suggestie stane. Op veel website's wordt zoiets gebruikt. Het lijkt alleen niet te doen wat ik wil, namelijk ervoor zorgen dat m'n afbeelding wel altijd volledig wordt weergegeven. De afbeelding wordt gecropped.

JSFiddle update:
http://jsfiddle.net/Lacpr/6/

Of zijn er bepaalde parameters waar ik geen kennis van heb?



Eigenlijk laten alle online demo's precies zien wat ik niet moet

[ Voor 19% gewijzigd door kamerplant op 17-01-2014 20:53 . Reden: afbeelding bijgevoegd ]

[kamerplant]

Hmm ik denk dat het jQuery zal moeten worden

[kamerplant]

Opgelost dmv jQuery dan maar!

JavaScript:

$(document).ready(function(){
    var setFeatured = function() {
        var x = $( window ).height() - $("#menu").height() - $("#footer").height();
        var img = $("#featuredBox img");
        if ($("#featuredBox").height() > x) {
            img.css('height', x);
            img.removeClass('fullWidth');
              } else if ($("#featuredBox").height() != x) {
            img.removeAttr('style');
            img.addClass('fullWidth');
        }
    }

    $("#featuredBox img").load(setFeatured);
    $(window).resize(setFeatured);
});

Cascading Stylesheet:

.featuredBox .fullWidth {
    width:100%;
}

Nadeel is wel dat dit pas wordt uitgevoerd na de load, dus knippert het scherm snel even.

[ Voor 13% gewijzigd door kamerplant op 18-01-2014 03:04 ]

[Douweegbertje]

Of: http://jsfiddle.net/Lacpr/7/ En dan blijft hij fixed staan, geeft wel een leuk effect
Of: http://jsfiddle.net/Lacpr/8/ En dan gaat hij gewoon mee in de div.

ho.. nvm het gaat om de crop:

dan deze

http://jsfiddle.net/Lacpr/9/

[ Voor 20% gewijzigd door Douweegbertje op 18-01-2014 11:33 ]

[kamerplant]

Die cropped



Ik moet zeggen dat ik een nette CSS oplossing absoluut prefereer boven jQuery.

[Douweegbertje]

http://jsfiddle.net/Lacpr/10/

[orf]

Douweegbertje schreef op zaterdag 18 januari 2014 @ 12:08:
http://jsfiddle.net/Lacpr/10/

Cascading Stylesheet:

.content img {
    height:auto;
    width:100%;
}

Is dat niet mooier om de afbeelding in proportie te houden?

[Douweegbertje]

orf schreef op zaterdag 18 januari 2014 @ 12:11:
[...]

Cascading Stylesheet:

.content img {
    height:auto;
    width:100%;
}

Is dat niet mooier om de afbeelding in proportie te houden?

Nee. Dat heeft geen enkel nut. Nu heb ik juist een parent container met een bepaalde hoogte, vanwege de header (dus een margin erop). Als het child element in zo'n container een height:100% heeft, dan pakt hij de volledige hoogte van zijn parent element. Met een height auto, zorg je er voor dat hij de height pakt afhankelijk van andere child elementen in deze container.

Height auto is handig als je bijvoorbeeld een container hebt met een height van 100px;, een element in deze container van 10px, en je wilt de rest opvullen. Dan gebruik je auto, en zal deze dus 90px "krijgen".


-- ps.
In mijn link kan de display:block weg, dunno waarom ik dat daar neer had gezet

[ Voor 5% gewijzigd door Douweegbertje op 18-01-2014 12:17 ]

[orf]

Ehm, heb je het ook daadwerkelijk geprobeerd? In je jsfiddle wordt de afbeelding uitgerekt:



Als je de afbeelding een height:auto geeft, blijft deze in proportie:



Pas de ene regel css maar eens aan.

[kamerplant]

Kun je de JS Fiddle updaten? Ik geloof dat het namelijk nog niet goed gaat als de ruimte verticaal te klein is. (Wel geprobeerd)

[ Voor 7% gewijzigd door kamerplant op 18-01-2014 13:12 ]

[MoietyMe]

Wat voor afbeeldingen komen er in? Als je de afbeelding horizontaal altijd 100% wil hebben zul je altijd verticaal moeten croppen, andersom ook. Als het afbeeldingen zijn zoals de koe nu (dus met een effe achtergrond kan je die kleur natuurlijk gewoon meegeven aan de div en de afbeelding 100% height en een width: auto; meegeven. Het is onmogelijk om een afbeelding zonder croppen en zonder het verliezen van je aspect ratio op alle mogelijke resoluties/browser window formaten te tonen. Je zult altijd of moeten croppen (kan ook aan één zijde van de afbeelding) of je aspect ratio laten varen.

[Klaasvaak]

Werkt deze naar behoren?
http://jsfiddle.net/Lacpr/12/

[R4gnax]

Cascading Stylesheet:

.container {
  position : relative;
  height   : 200px;
  width    : 200px;
}

.container > img {
  margin     : auto;
  max-height : 100%:
  max-width  : 100%;
  position   : absolute;
    top        : 0;
    right      : 0;
    bottom     : 0;
    left       : 0;
}

Op deze manier kun je een plaatje binnen een container gecentreerd krijgen en automatisch met behoud v/h originele aspect ratio, passend houden. Werkt in alle gangbare browsers, behalve IE 7. (Hoewel die eigenlijk ook niet meer gangbaar is.)

[kamerplant]

R4gnax schreef op zondag 19 januari 2014 @ 15:58:

Cascading Stylesheet:

.container {
  position : relative;
  height   : 200px;
  width    : 200px;
}

.container > img {
  margin     : auto;
  max-height : 100%:
  max-width  : 100%;
  position   : absolute;
    top        : 0;
    right      : 0;
    bottom     : 0;
    left       : 0;
}

Op deze manier kun je een plaatje binnen een container gecentreerd krijgen en automatisch met behoud v/h originele aspect ratio, passend houden. Werkt in alle gangbare browsers, behalve IE 7. (Hoewel die eigenlijk ook niet meer gangbaar is.)

Het marktaandeel van IE 7 is onderhand nihil, dus dat kan me vrij weinig bekoren. IE 8 met 5,5% marktaandeel in Nederland vind ik al nauwelijks de moeite waarde. (Bron: http://gs.statcounter.com...monthly-201312-201401-bar)

Ik heb de CSS toegepast. Het werkt zolang ik de width en height in pixels vastzet, maar als ik het dynamisch maak (en dat wil ik) - dan verliest de afbeeldingen de verhouding als de verticale ruimte te klein is.

Klaasvaak schreef op zaterdag 18 januari 2014 @ 23:17:
Werkt deze naar behoren?
http://jsfiddle.net/Lacpr/12/

Nee. De afbeelding reageert goed als er verticaal verkleind/vergroot wordt. Horizontaal is de afbeelding fixed.

Good Fella schreef op zaterdag 18 januari 2014 @ 17:30:
Wat voor afbeeldingen komen er in? Als je de afbeelding horizontaal altijd 100% wil hebben zul je altijd verticaal moeten croppen, andersom ook. Als het afbeeldingen zijn zoals de koe nu (dus met een effe achtergrond kan je die kleur natuurlijk gewoon meegeven aan de div en de afbeelding 100% height en een width: auto; meegeven. Het is onmogelijk om een afbeelding zonder croppen en zonder het verliezen van je aspect ratio op alle mogelijke resoluties/browser window formaten te tonen. Je zult altijd of moeten croppen (kan ook aan één zijde van de afbeelding) of je aspect ratio laten varen.

De afbeeldingsgrootte doet er in feite niet toe. De afbeelding moet zich simpelweg aanpassen aan de kleinst beschikbare kant van de beschikbare ruimte van de browser - zodat zonder crop zo veel mogelijk van de afbeelding wordt weergegeven. Zie onderstaande afbeeldingen (dit is gewenst):

De horizontale kant is de belemmerende factor, dus wordt die horizontale ruimte gemaximaliseerd en ontstaat er verticaal ruimte.


Precies andersom: Verticaal is de belemmerende factoor, horizontaal ontstaat lege ruimte.


Het lijkt erop dat in CSS 3 je moet kiezen tussen 100% verticaal óf horizontaal en de rest croppen... of jQuery .

[R4gnax]

Datafeest schreef op maandag 20 januari 2014 @ 11:54:
Ik heb de CSS toegepast. Het werkt zolang ik de width en height in pixels vastzet, maar als ik het dynamisch maak (en dat wil ik) - dan verliest de afbeeldingen de verhouding als de verticale ruimte te klein is.

Dan doe je wss. iets verkeerd. Dit werkt nl. echt gewoon zoals het hoort. Heb het zelf al diverse malen gebruikt voor plaatjes in schermvullende lightbox-achtige overlays, bijvoorbeeld.

[Krilo_89]

Je plaatje als achtergrond image invullen en: background-size: contain; gebruiken?
Er zijn toch ook genoeg jQuery plugins die je images laten resizen met het behouden van aspect ratio's?

Je wilt dat die koe altijd volledig zichtbaar is op het deel van je scherm? Dus wanneer je een laptop scherm hebt, die vaak niet zo hoog is, maar wel breed, dan moet de koe minder breed worden, omdat hij anders qua hoogte niet past?

[kamerplant]

R4gnax schreef op maandag 20 januari 2014 @ 13:15:
[...]

Dan doe je wss. iets verkeerd. Dit werkt nl. echt gewoon zoals het hoort. Heb het zelf al diverse malen gebruikt voor plaatjes in schermvullende lightbox-achtige overlays, bijvoorbeeld.

Je hebt gelijk, ik deed het inderdaad verkeerd. Het is eigenlijk een hele slimme oplossing . Heel chill dat het nu zonder jQuery lukt.