Comment adapter parfaitement une image à une fenêtre de navigateur ?

Comment redimensionner une image pour l'adapter parfaitement à la fenêtre du navigateur

S'assurer qu'une image s'intègre parfaitement dans une fenêtre de navigateur peut présenter des défis, en particulier avec dimensions du navigateur et proportions de l'image inconnues. Cependant, réaliser cette fonctionnalité de redimensionnement est possible avec une approche bien conçue.

Solution CSS uniquement (mise à jour en avril 2018)

Pour les navigateurs prenant en charge le CSS moderne, une solution purement La solution CSS peut être implémentée comme suit :

<code class="html"><div class="imgbox">
    <img class="center-fit" src="pic.png">
</div></code>

<code class="css">* {
    margin: 0;
    padding: 0;
}
.imgbox {
    display: grid;
    height: 100%;
}
.center-fit {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}</code>

Cette solution utilise une grille CSS et redimensionne et centre dynamiquement l'image dans la fenêtre du navigateur.

Solution jQuery

Une autre approche utilise jQuery pour définir la hauteur du corps égale à la hauteur de la fenêtre, permettant à la propriété max-height de l'image de fonctionner comme prévu :

<code class="html"><img class="center fit" src="pic.jpg"></code>

<code class="javascript">function set_body_height() {
    $('body').height($(window).height());
}
$(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
});</code>

<code class="css">* {
    padding: 0;
    margin: 0;
}
.fit {
    max-width: 100%;
    max-height: 100%;
}
.center {
    display: block;
    margin: auto;
}</code>

Cette La solution consiste à définir la hauteur du corps pour qu'elle corresponde à la hauteur de la fenêtre, permettant à l'image de se redimensionner dynamiquement à mesure que les dimensions de la fenêtre changent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!