About the method of responsive and centered display of CSS banner image

This article mainly introduces the method of responsive center display of CSS banner images. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look.

On the homepage of a PC website, the banner picture is the largest picture on the webpage. While conveying the main information of the webpage, it also attracts all the attention of the viewer. Therefore, the way the banner image is displayed directly affects the user experience. Today we will talk about how to center the banner image in the viewports of different sizes.

We all know that through background-size: cover; property can display the picture in the center, but in the process of stretching the window, the picture often becomes terrible with the stretching, so we can separate the picture and hide both sides of the picture to achieve this. The purpose of centering the banner image in different sizes

HTML structure is as follows

<p class="banner">
    ![](img/banner.jpg)
</p>

CSS style is as follows

body {
    overflow-x: hidden;
}
.banner {
    width: 1210px;
    margin: 0 auto;
}
.banner img {
    width: 1920px;
    margin: 0 -355px;
    vertical-align: middle;
}

When the viewport width and the picture width are the same as 1920 px, the cake is exactly in the center of the view, and the page effect is as shown below

width:1920px

When the viewport width is 1210 px, the Nian cake is still displayed in the center of the view, as shown in the following figure

width: 1210px

The content of this article ends here. I have sent the source code to GitHubBanner response centered. Students in need can download it by themselves

End of File

It is inevitable that errors or inaccuracies will appear in the writing process. I hope everyone can correct me so as not to mislead more people.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS box model example

##How to use negative margin values ​​in CSS to adjust the center position

CSS to achieve the effect of text wrapping around images

The above is the detailed content of About the method of responsive and centered display of CSS banner image. For more information, please follow other related articles on the PHP Chinese website!