In div, img is centered based on different resolutions. The excess part is hidden. divimg

In div, img is centered based on different resolutions. The excess part is hidden. divimg

The problems encountered when I was working on banner's residence, I knew that I could use the background image to display them in the center, but I wanted to go deep into it. So I found several ways to collect them. The next two are really amazing.

Next two places

Https://www.zhihu.com/question/39742237

Https://www.v2ex.com/t/187544

 

4. Parent element position: relative, child element

{Transform: translate (-50%,-50% );
Position: absolute;
Top: 50%;
Left: 50% ;}

The width of the Parent and Child elements can be undefined. The translate percentage is based on its own height and width. The problem only occurs when the UC browser and overflow: hidden are superimposed.

5. Extend the width and height of the parent element with the p element and the hidden img element.

Http://nec.netease.com/library/141122

<div class="m-demo">    <p>                    </p></div><div class="m-demo">    <p>                    </p></div><div class="m-demo">    <p>                    </p></div>

/* Hide the image center overflow */. m-demo {position: relative; width: 300px; height: 300px; overflow: hidden; border: 1px solid # ddd ;}. m-demo p {position: absolute; top: 50%; left: 50%; margin: 0; padding: 0 ;}. m-demo img {position: absolute; top:-50%; left:-50%; display: block ;}. m-demo img. hidden {visibility: hidden; position: static ;}

6. Set a to top:-100%; bottom:-100%; left:-100%; right:-100%; to three times the original size, and then text-align: center; center

Http://dabblet.com/gist/e191e05066016cb040d4

<div class="banner">    <a href="#"></a></div><div class="banner">        <a href="#"></a></div>

.banner { width: 300px; height: 200px; overflow: hidden; position: relative; }.banner > a { position: absolute; top: -100%; bottom: -100%; left: -100%; right: -100%; text-align: center; }.banner > a:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }.banner > a > img { vertical-align: middle; }