HTML foto probleem (hoop dat ik dit hier kan vragen)

[tshw3]

Hallo helpmij leden,

Ik heb een probleem met mijn website en ik hoop dat iemand mij kan helpen.
Ik heb een wordpress pagina:http://tslagter.nl/

Op die pagina heb ik een afbeelding, zie voorbeeld onderaan dit bericht met @, mail en telefoon.
De foto laadt goed bij 1920x1080 en op mobiel maar niet op kleinere resoluties dus of een laptop met klein scherm of een kleiner venster.

Op mijn Surface laptop is het bijvoorbeeld niet goed uitgelijnd.


Dit is de code die ik gebruikt heb:

<div id="img_box">
<img style="width: 100%;" src=" https://tslagter.nl/wp-content/uploads/2019/12/Contact2.png ">
</div>

Is het mogelijk door middel van HTML dat de afbeelding wel ten alle tijdens het hele venster beslaat, en dus nooit verkeerd uitgelijnd is?
Love to have a solution for this problem.



Ik zie graag een reactie tegemoet,
Tshw3

 

[bron]

De website is responsive. De oorzaak ligt niet bij de foto want die schaalt netjes mee naarmate de resolutie verandert. Het probleem ligt 'm in het "Even kennismaken?" blok dat te hoog is. Je zou die labels boven de invulvelden weg kunnen halen want in de velden staat wat er ingevuld moet worden. Op die manier wordt het blok minder hoog. Je zou ook wat kunnen doen aan de (te) ruime marges boven en onder de tekst "Even kennismaken?".

 

[tshw3]

De website is responsive. De oorzaak ligt niet bij de foto want die schaalt netjes mee naarmate de resolutie verandert. Het probleem ligt 'm in het "Even kennismaken?" blok dat te hoog is. Je zou die labels boven de invulvelden weg kunnen halen want in de velden staat wat er ingevuld moet worden. Op die manier wordt het blok minder hoog. Je zou ook wat kunnen doen aan de (te) ruime marges boven en onder de tekst "Even kennismaken?".

Dank voor jouw reactie!

Ik snap wat je bedoeld, maar toch is het voor mij niet volledig verklaard.
Hoe kan het dan zijn dat bij 1920,1080 dus bij groot formaat het wel goed te zien is op volledige grote en pas bij verkleinen de foto niet meer volledige het venster blijft vullen.

Of mis ik hier iets?

 

[bron]

Je kan bij een responsive website heel eenvoudig zien wat de pagina doet bij alle resoluties. Maak de browser smaller op je Full HD scherm, dan zie je dat de foto netjes (in verhouding) van formaat verandert maar dat het "Even kennismaken?" niet dusdanig is gemaakt dat deze bij een smallere browser minder hoog is.



Samengevat:
De hoogte van de foto wordt kleiner als de browser smaller wordt (reden: de hoogte/breedte verhouding moet hetzelfde blijven) .
De hoogte van het "Even kennismaken?" blok verandert echter niet als de browser smaller wordt.

 

[tshw3]

Bron dank voor de uitleg, ik begrijp het nu een stuk beter! Ik ga er weer mee aan de slag!