IMG tags in html only display the method of the center position of the picture (three methods)

The method of IMG label display image center in html is currently knowing three types. Here

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

Set the picture of the Width and Height of the picture is equivalent to the proportion of the actual width of the picture, and then use the RECT method to set the cutting range of the picture.

 <Style Type = Text/CSS> IMG {Background- Image: URL (http://img2.utuku.china.com/640x0/news/20170210/77b8b5CA-11D3-9A93-C12DF5EBEBEBEBEBEBEBEBEBEBEBEBEBEBEBEBEBE 1A35.jpg); // Set Background picture Background-Repeat: no-Repeat; // Background image will only be displayed once. Background-ATTACHMENT: Scroll; // Background-Position: -50px 0px; // Set the offset of the background picture. This -50 is equivalent to the background overall shift to the left, and you can display the center Background-siZe: 300px 200px; //// Set the size of the background picture, which is equivalent to the actual wide and high proportion of the background.

Use the background to control the center position of the picture display. You need to set up the background according to the real width height ratio of the picture, and then the amount of mobility of the background to control the width and height of the picture. At this time, a gray border will appear in the displayed picture, and there is no way to remove it. Border: 0px has no effect. My previous solution was to put a default and transparent picture in SRC and solve it.

 <div style = width: 100px; height: 100px; overflow: hidden> <IMG = http: //img2.utuku.china.com/640x0/20170210/77B8B5CA-11D3-4307-9a 93-C12DF5EB1A35.JPG Style = Position: Relacted ID = IMG_ID> </DIV> <Script> VAR IMG = DOCUMENT.GetelementByid (IMG_ID); VAR Image = New Image (); Var Realwidth = 0; Width Var Realheight = 0;/ /Storage pictures The actual height // The width height of the picture obtains the picture of image.src = http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg; // Processing Image.onload = Function () {Realwidth = Image.width; // Get the actual width of the picture Realheight = Image.Height; // Get the actual height of img is equivalent to the actual high height of the picture. Substant, and then offset if (realwidth> realhead) {img.width = (100/realhead)*Realwidth; // The width of the width of the width of img.height = 100; // The height of the DIV is consistent. ' -' + ((100/Realheight)*Realwidth-100)/2 +' PX '; // Set the picture of the picture with the width of the IMG tag-half of the height} Else if (Realwidth <realheigh) {IMG. width = 100; // The height of the DIV is consistent with img.head = (100/realWidth)*Realheight; // equal to the height of the zoom. Style.top = '-' + ((100/RealWidth)*Realheigh-)// 2 + 'px'; // Set the picture of the picture with the height of the IMG label with the height of the IMG label} Else {img.width = 100; img.head = 100;}; // The picture of the picture loads the failure of IMG IMG .onerror = function () {img.src = https://timgsa.baidu.com/timg?image&quality=80&Size=b9999_10000&SEC=1492076382&DI=04ebd6888b2f fbd8ae18e685234704 & IMGTYPE = 0 & SRC = HTTP%3A%2FD.HIPHOTOS.BAIDU.com%2fzhidao %2FWH%253D450%252C600%2FSIGN%3D0C96DC8633C895A62B907FE4235FC6%2F0823dd54564E9258D2DFF9F82D158CCBF4E17.jpg; img.width = 100 ; img.head = 100;} </script>

The above comments are already very clear, mainly because DIV controls the size, and the IMG tag regulates its size according to the size of the DIV. Differential shifts to reach the picture in the middle of the picture. Personally, I think the third method is better.

The above is the IMG tag in the HTML introduced by Xiaobian to you only display the method of the center position of the picture (three methods). I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. of. Thank you very much for your support for the VEVB Wulin website!