How to realize that the large picture is still centered according to the adaptive width of the resolution
This article mainly introduces "how to achieve large pictures according to the resolution adaptive width is still displayed in the center", in daily operation, I believe many people in how to achieve large pictures according to the resolution adaptive width is still displayed in the center of the problem there are doubts, small editor consulted all kinds of data, sorted out simple and easy to use operation methods, hope to answer "how to achieve large pictures according to the resolution adaptive width is still displayed in the center" doubts help! Next, please follow the small series to learn together!
Problem: A large picture of 1920*900 can only be partially displayed at a resolution of 1024*768. I hope it will still be displayed in the center.
Solution CSS:
The code is as follows:
width: 100%;
background-position: 50% 50%;
Example code:
The code is as follows:
body {
background-repeat: no-repeat;
width: 100%;
background-position-x: 50%;
background-position-y: 118px;
background-image:url(@Url.Image("/XXX/XX.jpg"));
}
.book {
margin: 0 auto;
width: 960px;
height: 700px;
position: relative;
}
The code is as follows:
At this point, the study of "how to realize the adaptive width of large pictures according to resolution is still centered" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!
