Question

实际上，我的宽幅图像很大。宽度为3000px，高度为100px。我需要在浏览器中显示图像的中心部分。

如果我放置图像，它会显示图像的左侧部分。但首先我应该展示中心部分。如果显示屏很大，则可以显示侧面。

仅内嵌图片。

<div class="my_img">
  <img src="img.png" >
</div>

我该怎么办？

Answer 1

使用margin:0 auto; display:block;。这将使它成为中心。

Answer 2

contain将图像缩放到最大尺寸，使其宽度和高度都适合内容区域。

尝试：

img{background-size:contain;}

Answer 3

如果要显示图像的中心，您需要做的是使用div而不是img。在那个div的样式中，你将背景设置为你想要显示的图像，然后，你用css background-position：50％0px

来居中

  <div class="my_img">
       <div 
          style="background-image:url(img.png); 
                 height:YOUR_IMAGE_HEIGHT; 
                 background-position: 50% 0px;">
       </div>
</div>

这样，如果屏幕较小，图像将被裁剪并显示中心。如果屏幕很大，您将看到整个图像，也是中心

Answer 4

不是我确定的最干净的方式，但它确实有效：

http://jsfiddle.net/7eA3W/

<div>
    <img src="http://placehold.it/3000x100" alt="" />
</div>


div {
    overflow: hidden;
    width: 300px;
}
img { 
    margin-left: -1350px; // minus half of the image width, minus half of the container width
}

图像的中心部分适合屏幕

4 个答案: