Trois méthodes en HTML pour implémenter la balise img afin d'afficher uniquement l'exemple de code au centre de l'image

html dans balise img affiche la image méthode centrale actuellement Je connais trois méthodes. L'éditeur les partagera ci-dessous sur la plateforme Script House. Les amis qui en ont besoin peuvent s'y référer

Il existe actuellement trois méthodes pour afficher le centre de l'image dans la balise img en HTML. les enregistrera ici.

Le premier type : en utilisant css clip:rect(top right bottom left ); L'utilisation doit être utilisée avec position : absolue : comme suit

<img src="http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg"
     style="position: absolute;clip: rect(0px,250px,200px,50px);width: 300px;height: 200px">

pour définir la largeur et la largeur de l'image La hauteur est égale à la mise à l'échelle proportionnelle de la largeur et de la hauteur réelles de l'image, puis utilise la méthode rect pour définir la plage de découpage de l'image ><🎜. >Attributs

 :

Utilisez l'arrière-plan pour contrôler la position centrale de l'affichage de l'image. Vous devez définir l'arrière-plan en fonction. à la largeur réelle de l'image. Mettez à l'échelle proportionnellement, puis décalez la quantité de mouvement de l'arrière-plan pour contrôler la largeur et la hauteur de l'image. Ce qui doit être noté, c'est que le src de l'image ne peut pas être défini lorsque la balise img. ne définit pas src, une bordure grise apparaîtra sur l'image affichée, et il n'y a aucun moyen de la supprimer bord

er:0px ne fonctionne pas non plus. Ma solution précédente consistait à mettre complètement une valeur par défaut. image transparente dans src et cela résoudrait le problème. >La troisième méthode : inclure img dans p, utiliser le

overflow
de p : caché ; pour le contrôler, il est plus flexible à utiliser,

<style type="text/css">
        img {
            background-image: url(http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);//设置背景图片
            background-repeat: no-repeat;//背景图像将仅显示一次。
            background-attachment: scroll;//
            background-position: -50px 0px;//设置背景图片的的偏移量，这个-50相当于背景整体向左偏移50，就可以显示图片的中心
            background-size: 300px 200px;////设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
            background-color: transparent;//
            width: 200px;//
            height: 200px;//
        }
    </style>

Le commentaire ci-dessus est déjà très clair, principalement p contrôle la taille, et la balise img ajuste sa taille en fonction de la taille de p, afin d'afficher la partie médiane de l'image. Personnellement, je pense que la troisième méthode est plus simple à utiliser .

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!