[Centering Series] Horizontal and vertical centering of images with variable sizes in fixed containers_html/css_WEB-ITnose

Generally when making product pages, if the width and height of product images are fixed, some images will be deformed. If the width is set to the maximum width, If the adaptability is high, some pictures will exceed the container because they are rectangular, so part of the picture will have to be cut off. So I thought, first of all, no matter what the ratio of the picture is, whether it is wider than tall or tall than wide, set the maximum width and height value uniformly to prevent it from exceeding the container, and the picture will not be deformed in this way. Next, I want to deal with the problem of the variable size of the image and the horizontal and vertical centering in the fixed container.

Reference links:

Zhang Xinxu: Vertical and horizontal centering of images with variable sizes and multi-line text

w3cplus Desert: Horizontal and vertical centering of images made with css

After comparing their methods, I found Zhang Xinxu’s method① Transparent gif image background positioning. We always use img instead of background for product pages. I am a little worried that the background will be difficult to handle, so I generally don’t want to use it. This method; method ② display:table-cell and text size control are centered , there is no link. If you add a link to the image, it will be misplaced in ie7, method ③ display:inline-block and text The size control is centered . The effect is not what I want. The method ④ uses a blank image to achieve vertical alignment . This method is not as simple as w3cplus desert.

After comparison and comprehensive consideration, the following methods are summarized.

1. Recommended usage (use font-size:0 and blank tags)

2. It is recommended to master the skills. Using display:table-cell and display:inline

Maybe this method is more cumbersome than the first one, and you have to write a hack that is compatible with IE, but I think using display -table and vertical-middle are worth learning to achieve vertical centering of images in modern browsers. If I don’t need to be compatible with low-end browsers in the future, this method may be more suitable for me.

3.jquery method.

Convert the image to the background image of its parent element, and center the background image in its parent element, and then set its own transparency to "0", so that the image can be centered effect.

This method is mainly about learning this idea. However, after my own testing, I found that it is not suitable for large images, so even if I set the img to max-width and max-height, it will be useless. After changing to background it will still display the original image size. So I won’t post it here. If you are interested, you can check out the link to Desert w3cplus above.