Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "css to achieve the method of central display when the picture is larger than div". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "css to achieve the method of central display when the picture is larger than div" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

When the picture is larger than p, you want the picture to be centered. If the picture is scaled down equally, it may cause the picture not to fill the whole p. If you directly set the width and height of the picture, set its outer p to overflow:hidden. In this case, even if the outer p is set to horizontal and vertical centering, the picture is not centered.

Solution:

1-Set the image as background image

.face-img-contain{

width:348px;

height:436px;

margin:0auto;

margin-top:14px;

position:relative;

background-image:url(../ images/face-img/test-22.png);

background-repeat:no-repeat;

background-position:center;

background-size:cover;

display:flex;

justify-content:center;

align-items:center;

border:1pxsolidgainsboro;

}

If the background returns the address, don't forget that the splicing method is correct.

$("#face-img-back").css("background-image","url("+faceImg+")");

2-Set the width and height of the picture to 100% of p, and then set object-fit:cover;

.face-img-contain-new-new{

width:348px;

height:436px;

margin:0auto;

margin-top:14px;

position:relative;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

border:1pxsolidgainsboro;

}

.face-img-defined1{

width:100%;

height:100%;

object-fit:cover;

}

Read here, this article "css to achieve the picture is larger than div when the method of display in the center" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more about the content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.