图像的中心部分适合屏幕答案

【问题标题】：image's center part fit into screen图像的中心部分适合屏幕
【发布时间】：2013-12-20 22:34:31
【问题描述】：

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

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

它只是内嵌图片。

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

我能做什么？

【问题讨论】：

这是内嵌图片还是背景图片？

标签： html css image alignment width

【解决方案1】：

使用margin:0 auto; display:block;。这将使其到达中心。

【讨论】：

jsfiddle.net/33qZu - @KarSho 你在寻找类似的东西吗？

【解决方案2】：

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

试试：

img{background-size:contain;}

【讨论】：

【解决方案3】：

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

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】：

如果你想显示图像的中心，你需要做的是使用 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>

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

【讨论】：

我知道。我需要回答我的问题
有了这个，无论图像宽度是多少，你都会得到你想要的（如果你改变图像宽度，你不需要编辑代码）