11

我附上了一张我的页面看起来像的图。页面的宽度为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>

在此处输入图像描述

4

9 回答 9

3

请使用位置：相对于图像。像这样：

<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;
}

margin-left 等于 img 的宽度/2。请查看演示。

于 2013-06-10T15:14:54.440 回答
1

你可以试试这个

 <div class="popup">
 <div class="wrapper">
 <img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
 </div>
 </div>

CSS：

.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative; 
left:-50%;

/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}

示例：jsfiddle

通过埃拉德谢赫特

于 2013-06-10T13:19:05.990 回答
0

你可以这样试试：

HTML：

<div class="wrapper">
    <div class="image">
        <img src="img/img.jpg">
    </div>
</div>

JS：

<script>
$(document).ready(function() {
    $('div.image').each(function() {
          var imageSrc = $(this).find('img').attr('src');
          $(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
    });
});
</script>

CSS：

.wrapper {
    float: left;
    width: 100%;
    overflow: hidden;
}
.wrapper .image img {
    visibility: hidden;
}
于 2014-08-08T17:38:49.347 回答
0 
.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}
于 2013-06-10T13:23:52.477 回答
0

<img />使标签居中的简单方法。

body {
  margin: 0;
}

.warpper img {
display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover
}
<div class="warpper">
  <img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>

于 2020-01-03T14:40:05.257 回答
0

这个怎么样：https ://jsfiddle.net/squadjot/hva34oju/

HTML：

    <div id="imgwrap">
      <img src="https://i.stack.imgur.com/gkOwi.jpg">
    </div>

CSS：

    #imgwrap {
      text-align:center;
    }
    
    #imgwrap img {
      margin:0 -1000%; /* don't ask :P */
    }

适用于我尝试过的所有浏览器。IE、Chrome、Opera、FF

于 2021-02-25T13:51:31.900 回答
-1

背景尺寸：自动；

为您的图像设置此属性

于 2013-06-10T12:56:17.953 回答
-1

.image { 位置：绝对；左：-50%；}

于 2013-06-10T13:19:48.863 回答
-1

尝试这个：-

  .image {
    position: absolute;
    left: -50%; 
  }

我认为它适用于更大的图像......

于 2013-06-10T13:07:36.300 回答