Mijn afbeeldingen hebben allemaal verschillende afmetingen, hoe toon ik ze op webpagina met 1 specifieke afmeting?

[mario64]

Vul de lijst onder 'Waar je vraag over gaat' in volgens getoond voorbeeld uit spoiler.

► Laat Spoiler zien

Voorbeeld:

1. Voorgedrukte tekst.
   Antwoord: Jouw reactie.

Voordat je verder gaat ...

1. Maximaal aantal tekens voor onderwerp is 114 (inclusief spaties).
2. Voeg voor 'Probleembeschrijving' in de lijst ook foutmeldingen en (stop)codes toe.
3. Typ N.V.T indien het onderdeel niet van toepassing is.

--------------------------------------------------------------------------------------------------------------------
Waar je vraag over gaat.

1. Indien van toepassing:
2. Probleembeschrijving.
   Antwoord: Ik wil alle afbeeldingen (in HTML en/of BB-code) met dezelfde afmetingen weergeven zonder de afbeeldingen vooraf te hoeven bewerken.
3. Huidige situatie en/of aangebrachte wijziging(en).
   Antwoord: De afbeeldingen hebben nu allemaal verschillende afmetingen.

Hieronder ruimte voor extra toelichting:
--------------------------------------------------------------------------------------------------------------------

[BBgebruiker1]

In HTML code kun je een afbeelding reeds voorzien van een breedte en lengte zonder de afbeelding vooraf te bewerken.
Dat doe je dan met de code:
<img src="{URL}" style="width: {NUMBER1}px;height: {NUMBER2}px;" />
Dan kan het er bijvoorbeeld als onderstaand gaan uitzien:
<img src="{URL}" style="width: 400px;height: 150px;" />

In BB-code doe je dat als volgt:
[fimg=width,height]ImageURL[/fimg]
Het kan er dan ongeveer als onderstaand gaan uitzien:
[fimg=400,150]http://www.mysite.com/my_image.jpg[/fimg]

Ik heb het opgezocht en vrij vertaald, oorspronkelijke (Engelstalige) pagina kan je 'hier' vinden.

[peer_76]

Indien het de bedoeling is dat alle afbeeldingen dezelfde afmetingen krijgen is het handiger om dit middels css te doen. Het handigst is om dan een class aan te maken, zodat je ook afbeeldingen uit kan sluiten.
Zo'n afbeelding plaats je dan zo (html): Please Login or Register to see this code In de header maak je dan een style regel aan: Please Login or Register to see this code Door alleen een waarde voor de breedte in te vullen zal de hoogte automatisch worden berekend zodat de originele verhoudingen gehandhaafd blijven.
Een nadeel van een vaste waarde voor de breedte is dat bij een kleine scherm mogelijk scrollbalken worden getoond omdat de afbeelding breder is dan wat het scherm toelaat. Om die reden is het handig om een breakpoint toe te voegen zodat de pagina responsive wordt.
Als voorbeeld ga ik weer uit van een breedte van 640 pixels. De breakpoint stel ik in op 660 pixels in verband met eventuele borders. Please Login or Register to see this code

[BBgebruiker1]

@peer_76 , bedankt voor je uitgebreide uitleg met toelichting.
Responsive is goed, maar van welke afmetingen (px) ga je dan uit zodat je voor afbeeldingen nergens scrollbalken te zien krijgt?
Want de responsive weergave op een 19" beeldscherm ziet er anders uit dan voor bijvoorbeeld een smartphone met een 6 of 7" display?

[peer_76]

De weergave zal afhankelijk zijn van de resolutie van het scherm (wat los staat van de diameter van het scherm).
Ik zal de code uit mijn vorig bericht even toelichten: Please Login or Register to see this code Dit is het eerste deel van de code. Hierin word bepaald dat afbeeldingen een vaste breedte van 640 pixels gaan krijgen. Voor de meeste schermen zal dat geen probleem zijn. Please Login or Register to see this code Dit 2e deel van de code geeft echter een uitzondering voor schermen met een kleinere resolutie. De code word door de browser gelezen. De browser kan ook de resolutie van het aangesloten scherm zien. Indien de resolutie van het scherm onder de 660 pixels zit zal de regel "@media only screen and(max-width: 660px)" worden aangesproken. En vervolgens zal de css onder die regel van kracht zijn, waarbij de afbeelding maximaal 100% van de schermresolutie mag zijn. De afbeelding word dan dus geschaald naar de resolutie van het scherm zonder scrolbalk voor de breedte. Hierbij geldt dan natuurlijk wel dat de rest van de lay-out binnen het scherm moet passen.

Als je de bron van een responsive site bekijkt zal je deze regel aantreffen: Please Login or Register to see this code Deze regel zorgt ervoor dat alles leesbaar blijft in een mobiele weergave. Een moderne smartphone heeft vaak minimaal een full hd resolutie. De viewport regel zorgt ervoor dat de weergave aangepast zal worden alsof de resolutie kleiner is. Hierdoor zal dus ook de breakpoint van (in het voorbeeld) 660 pixels worden aangesproken.

De css is dus een stukje code waarin alle content op de juiste manier zal worden getoond.

[mario64]

Super @peer_76 , het is voor mij nu een stukje duidelijker.

[peer_76]

Die media queries zijn ideaal om de lay-out aan verschillende resoluties aan te passen.
Leuk om uit te proberen en om mee te oefenen: W3Schools | Media Queries

[mario64]

Die media queries zijn ideaal om de lay-out aan verschillende resoluties aan te passen.
Leuk om uit te proberen en om mee te oefenen: W3Schools | Media Queries

super bedankt @peer_76, je hebt me een eind op weg geholpen.

[peer_76]

Was deze vraag specifiek voor in het phpBB forum bedoeld? In dat geval kan je namelijk een stukje css voor in een bepaalde class aanmaken.

[mario64]

Voor gebruik in het phpBB forum heb ik een extensie gevonden waar je in de link alle gegevens over afmetingen van afbeeldingen kunt toevoegen.