Ik heb een slider met een afbeelding van 2000 pixels breed. Ik wil dat de afbeelding gecentreerd wordt weergegeven met een hoogte van 400 pixels. Stel mijn scherm is kleiner dan 2000 pixels, moet aan beide kanten van de afbeelding dus een stukje wegvallen.

Iemand die mij kan helpen?

In de CSS, background-size: contain; of background-size: cover; ik snap namelijk niet precies wat u wilt.
Een van de twee is waarschijnlijk wel goed ;)

Ik heb een slider welke altijd 100% breed is. De afbeelding daarbinnen moet een hoogte hebben van 400 pixels. Stel dat de breedte van mijn scherm 1600 pixels is dan valt er aan beide kanten 200 pixels weg van de afbeelding. De afbeelding moet gecentreerd worden in de div (slider).

Ik zou hem gewoon een width van 100% geven en de hoogte er bij laten zoeken, dan krijg je geen uitgerekte afbeeldingen of afbeeldingen met stukjes van de zijkant.

Maar dat moet werken met cover of contain toch? Of is het geen div background-image?

Nee het is geen background image maar:

Code:

<div id="slider">
    <img alt="" src="images/slide.jpg"/>
</div>

Width='100%' en geen height moet mooi werken.

Het probleem is dat ik een hoogte wil meegeven aan de afbeelding.
Als het scherm kleiner wordt, moet de hoogte gelijk blijven.

Origineel gepost door R van Breugel

Nee het is geen background image maar:

Code:

<div id="slider">
    <img alt="" src="https://www.sitedeals.nl/images/slide.jpg"/>
</div>

Kun je er geen background image van maken?
Je afbeelding benut dan optimaal de ruimte.

Code:

<div id="slider">
    <div style="background-image:url('https://www.sitedeals.nl/images/slide.jpg'); background-size:cover"></div>
</div>

[/QUOTE]

Nee dat gaat helaas niet. Ik heb een afbeelding, die in de meeste gevallen breder is dan de omliggende div (welke een breedte heeft van 100%) en wil deze centreren. Iemand nog een idee?

Origineel gepost door R van Breugel

Het probleem is dat ik een hoogte wil meegeven aan de afbeelding.
Als het scherm kleiner wordt, moet de hoogte gelijk blijven.

Als jouw afbeelding 1000px breed is en 500 hoog, je maakt je scherm 900px breed kan je toch niet dezelfde hoogte houden om alles in verhouding houden?

Natuurlijk wel. Stel ik heb een afbeelding van 1800 pixels breed en 500 pixels hoog. Mijn scherm is 1200 pixels breed. De overige 600 pixels vallen buiten mijn scherm.
Aan beide kanten 300 pixels, omdat de afbeelding wel gecentreerd moet blijven.

Je kan het wel proberen en in discussie gaan maar de manier waarop de meeste "outdated" sliders
werken, is een stuk moeilijker om dan jou manier daarin toe te passen dan gewoon per slide een class mee te geven met pseudo selectors
en dan in de css gewoon per selector een background-image toe te voegen die staat op background-size: cover;

maar goed hier is je fix, het is een hack maar het is wat jij wilt.

Code:

<div id="slider">
   <div class="center"><img src="#" alt="#" /></div>
</div>

Code:

#slider {
   position: relative;
   width: 100%;
   overflow: hidden;
}

#slider .center {
   position: relative;
   width: 10000px;
   left: 50%;
   margin: 0 0 0 -5000px;
   text-align: center;
}

graag gedaan.