image sans attributs
<img src="…"/> Le framework se charge de la rendre responsive
image avec attributs width et height
<img src="…" width="…" height="…"/> Le framework se charge de la rendre responsive
image avec l'attribut style
<img src="…" style="width:…;height=…;"/>
Il faut forcer une css
<style>
img { width: 100%; height: auto; }
</style>
max-width: 100%
On limite la largeur au max à la page, mais si l'image est plus petite, elle ne remplit pas toute la largeur.
L'image sera adaptée au container div
<img src="..." style="max-width:100%; height:auto;" >
width: 100%
On force la largeur à la largeur de la page, même si l'image est plus petite
Si l'image est plus haute que la page, on ne voit pas tout.
<img src="..." style="width:100%; height:auto;" >
Image entièrement visible sur l'écran
Il faut jajouter un div qui remplit tout l'écran et une image de fond :
div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/path/to/image.jpg') no-repeat center center / contain; }
Image qui remplit tout l'écran
On change le background :
div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/path/to/image.jpg') no-repeat center center / cover; }
Différentes solutions
https://css-tricks.com/which-responsive-images-solution-should-you-use/