图片大小不改动，根据屏幕大小自动把图片居中显示
background属性
background-image: url(‘../img/1_1.jpg‘); <!-- 背景图片路径 --> background-repeat: no-repeat; <!-- 背景图片是否重复显示 --> background-position: center; <!-- 若背景图片小于div,则居中显示 --> background-attachment: fixed; <!-- 背景图片固定,不随scroll拖动而变动 -->
居中显示
父容器
style="overflow-x:hidden"
子容器
position: absolute; left: 50%; top: 0%; <!-- div向左移动屏幕宽度的50% --> margin-left: -960px; margin-top: 0px; <!-- div向左移动自身宽度的50% -->
子容器会居中显示，但右侧多余的东西要靠父容器的overflow-x:hidden隐藏。
如果要上下也居中显示，则postion的top也要设置为50%，margin-top设置为图片的一半.
html&css
<body style="overflow-x:hidden">
<!--
background-attachment: fixed;
-->
<div style="width: 1920px; height: 1420px;
position: absolute; left: 50%; top: 0%;
margin-left: -960px; margin-top: 0px;
background-image: url(‘../img/1_1.jpg‘);
background-repeat: no-repeat;
background-position: center;">
</div>
</body>这样可以达到图片居中显示的效果。
相关推荐
多读书读好书 2020-11-03
drdrsky 2020-06-16
gufudhn 2020-06-12
aSuncat 2020-06-11
PioneerFan 2020-06-10
沈宫新 2020-05-04
swiftwwj 2020-03-28
HSdiana 2020-03-28
葉無聞 2020-03-23
lyg0 2020-03-07
nercon 2020-02-22
STPace 2020-02-17
STPace 2019-12-30
冰蝶 2020-01-10
玫瑰小妖 2019-12-31
行吟阁 2019-12-08
libowen0 2014-05-30