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:
##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!