中心图像大于屏幕

Question

我附上了我的页面看起来像的图纸.页面的宽度为980px,图像的宽度几乎为1200px.我想要实现的是让页面居中并尽可能多地显示图像,同时保持图像居中.我试图绝对定位图像,但随后在移动设备上,浏览器页面被设置为图像的宽度,内容不会保持居中.

基本上,可能存在屏幕,其中不向用户显示整个图像,而是仅适合屏幕.

CSS:

.page_container {
width: 980px;
margin: 0 auto;
}

.image {
position: absolute;
left: 0;
right: 0;
}

HTML:

<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>

在此输入图像描述

Answer 1

背景大小：自动；

为您的图像设置此属性