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>

enter image description here

Answer 1

请使用position：relative作为image.like：

<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。请查看demo。

Answer 2

你可以尝试这个

 <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

by Elad Shechter

Answer 3

.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}

Answer 4

您可以尝试这种方式：

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

Answer 5

简便地将<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>

Answer 6

这个怎么样：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

Answer 7

背景尺寸：汽车;

为您的图片设置此属性

Answer 8

试试这个： -

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

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

Answer 9

.image { 位置：绝对; 左：-50％; }

中心图像大于屏幕

9 个答案: