Kan de afhandeling van mijn images in css niet veel efficienter?

[Veng]

Er staan nogal wat plaatjes op mij site (http://is.gd/BNnGBf). Allemaal van verschillende afmetingen. Die definieer ik allemaal afzonderlijk in de css. Het werkt (zeker niet netjes op mobile), maar waarschijnlijk kan dit veel efficiënter. Mss met scaling, maar daarvan ben ik bang dat als ik dat ga invoeren, ik het overzicht verlies en ga vastlopen. Resizen zal ook wel niet veel oplossen omdat de breedte hoogteverhouding vaak wisselt.

 

[jorenman]

Om de afbeeldingen op je site op alle apparaten goed te laten zien, kan je gebruik maken van Media Queries (een nieuwe functie uitgekomen in CSS3).
Hiermee kan je per bepaalde breedte van het scherm instellen welke stylesheet de browser moet gebruiken.

Ook kan je instellen dat afbeeldingen niet groter mogen worden dan een bepaalde breedte van de pagina, dit doe je doormiddel van de volgende code:

img {
max-width: 50%;
height: auto;
}

Met 'max-width: 50%' geef je aan dat de afbeelding niet groter mag worden dan 50% van het beeldscherm of van een bepaalde box waar de afbeelding in staat.
Met 'height: auto' zorg je ervoor dat de hoogte van de afbeelding wordt aangepast aan de breedte die de browser dan gebruikt.

Met deze methode zorg je ervoor dat eigenlijk alle afbeeldingen op alle apparaten goed worden weergegeven.


Veel succes!

Groetjes,
Jorenman

 

[Veng]

Ik ben gestart met de implementatie van je code. Op zich gaat dit prima, maar waarschijnlijk maak ik nog een andere fout, welke bij de implementatie op mobiel zichtbaar wordt.
Als je deze link: http://www.relatie-voeding-gedrag.nl/Pages/Inleiding.aspx op schermgrootte 320px bekijkt, zijn de grotere plaatjes namelijk (veel) te veel naar rechts geschoven en staan feitelijk in de rechter marge.
Pagina's met kleinere plaatjes lijken wel goed. Deze bv.: http://www.relatie-voeding-gedrag.nl/
(Ik heb alleen "Home" en "Inleiding" bewerkt)
Ik bekijk dit op deze responsive website testpagina: http://mattkersley.com/responsive/
Ik gebruik nu deze code:
.divImg65
{
max-width: 65%;
height: auto;
margin: auto; (Heb ik toegevoegd om de images te centreren)
}

Mocht je tijd hebben om dit te bekijken, alvast mijn dank.

Hmm. Heb de oude situatie weer herstelt, want op mijn GSM krijg ik een ander plaatje dan op die Responsive website. Die vertrouw ik dus even niet. Morgen meer waarschijnlijk.