Three methods in HTML to implement the img tag to only display the sample code in the center of the picture

黄舟
Release: 2017-04-15 09:30:57
Original
4273 people have browsed it

html中img tagDisplayimageCenter method currently I know three methods. The editor will share them to the Script House platform below. Friends who need them can refer to the method of displaying the center of the image in the img tag in the

. Currently, I know three methods. I will record them here.

The first one: using cssclip:rect(toprightbottomleft); Usage needs to be used withposition: absolute: as follows


##

Copy after login

Set the width and height of the image to be equivalent Scale proportionally to the actual width and height of the image, and then use the rect method to set the clipping range of the image.

##- Second: Use img’sbackground#. ##Attributes:

Copy after login

Use the background to control the center position of the image display. You need to set the background to scale according to the true width and height of the image. Then offset the movement amount of the background to control the width and height of the picture. What needs to be noted is that the src of the picture cannot be set. When the img tag does not set src, a gray border will appear on the displayed picture, and there is no way to remove it. b
ord

er:0px also has no effect. My previous solution was to put a default fully transparent image in src, which will solve the problem.

The third method: Contain img in p, use p's

overflow: hidden; to control it, it is more flexible to use,

Copy after login

above
Comments

It is already very clear, mainly p controls the size, and the img tag adjusts its size according to the size of p, so as to display the middle part of the picture. Personally, I think it is the third way. The method is easier to use.

The above is the detailed content of Three methods in HTML to implement the img tag to only display the sample code in the center of the picture. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!