大于屏幕的中心图像 | 大于屏幕的中心图像

本文介绍了大于屏幕的中心图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我附上了我的页面外观图.页面的宽度为 980px ，图像的宽度几乎为 1200px .我要实现的是使页面居中并显示尽可能多的图像，同时还要使图像居中.我试图绝对定位图像，但随后在移动设备上将浏览器页面设置为图像的宽度，并且内容未居中.

I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.

基本上，在某些屏幕上可能不会向用户显示整个图像，而只会显示适合屏幕的大小.

Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.

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>

推荐答案

pls使用position:相对于图片.像这样:

pls use the position: relative for the image.like this:

<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>

css代码:

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

.image {
  position: relative;
  left: 50%;
  margin-left: -600px;
}

左边距等于img的宽度/2.请查看演示.

the margin-left is equal to the　img's width/2. pls view the demo.

这篇关于大于屏幕的中心图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！