将图像居中放在一个太小的 div 中？

Posted 2023-03-05

【中文标题】将图像居中放在一个太小的 div 中？

【英文标题】：Center an image in a div too small for it?

【发布时间】：2010-11-23 13:41:10

【问题描述】：

所以我的正文中有一个百分比宽度的 div，其中有一个具有如下内联样式的 div：

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

如您所见，我打开了text-align: center;，如果图像足够小以容纳div，则将图像居中。但百分比宽度div 在我的 1280x800 屏幕上肯定不够大。

负边距是为了克服其父级div 上的一些填充。 overflow:hidden 让事情看起来像我想要的那样，而不是凌乱。所以，它就像我想要的那样工作，就像onenaught.com 的标题图像一样。当您将浏览器变宽时，它会在右侧变得更加明显，但不会从两侧展开，因为它没有居中。

所以，我想知道是否有任何方法可以使图像居中。知道吗？

编辑：页面here。

【参考方案1】：

一种选择是使用left: 50% 绝对定位图像，然后在图像上使用负边距，等于图像宽度的一半。当然，这需要包含 div 将其定位设置为相对或绝对，以便为要在其中绝对定位的图像提供正确的容器类型。

另一个选项（可能更好）是不使用图像标签，只需将图像设置为父 div 的背景，并使用background positioning CSS attributes 将其居中。这不仅确保它居中而不强制绝对定位，而且它还自动裁剪溢出，因此溢出属性不是必需的。

【讨论】：

标记答案，因为它主要涵盖提交的两个答案。无法使用背景方法使事情正常工作，并且您还没有真正做到绝对定位。不过，谢谢。

+1 因为第一个解决方案也适用于非图像。这个问题确实指定了图像，但我来这里是为了将div 放在一个太小的容器中。谢谢。

链接似乎坏了在这里找到它w3schools.com/cs-s-ref/pr_background-position.asp 现在，解决方案是“背景位置：中心；”谢谢

【参考方案2】：

考虑使用图像作为背景；）

使用 background-position 得到你想要的。

您可能需要一个 javascript 解决方案来实现一致的跨浏览器结果

【讨论】：

如果图像纯粹是装饰性的，我会鼓励这种解决方案。 background-position: 50% 50% 在任何地方都可以正常工作。

【参考方案3】：

您实际上可以通过将图像上的margin-left 和margin-right 设置为-100% 来做到这一点。

这里有一个 jsFiddle 演示了这一点。（使用下面的那个更好）

将图像上的margin-left 和margin-right 设置为更大的负数是一个更好的主意，例如-9999%，与 -100% 值一样，只要 div 的包含元素的宽度小于 div 宽度的 3 倍，图像就会开始偏离中心：

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

您可以检查此 jsFiddle 与前一个之间的行为差​​异，方法是将溢出切换为可见并将结果窗口的大小调整为小于 300% 的宽度 @987654334 @。

在支持的浏览器范围内引用@MaxOriola（来自 cmets）：

我已经在 Firefox、Chrome、Safari（最新版本）和 Explorer 8、9、10 中重新测试了第二小提琴。在所有这些中都可以正常工作。

注意：图像元素必须显示为inline 或inline-block，并以text-align: center 水平居中（在包装元素上）。

// ALL of the JS below is for demonstration purposes only

$(document).ready(function() 
  $('a').click(function() 
    $('body > div').toggleClass('overflow');
  );
)

img 
  margin: 0 -9999% 0 -9999%;



/* ALL of the CSS below is for demonstration purposes only */

body 
  text-align: center;
  font-family: verdana;
  font-size: 10pt;
  line-height: 20pt;


body>div 
  margin: 0px auto;
  width: 40%;
  background-color: lightblue;
  overflow: hidden;


img 
  vertical-align: top;


.overflow 
  overflow: visible;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>40% wide div [<a href="#">toggle overflow</a>]
  <div>
    <img src="http://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>

【讨论】：

+10 这完全可行，并节省了对底层 html 的重写。

有人知道支持的浏览器范围吗？

我希望有一种方法可以为答案添加书签。这是那些没有记录并节省工作时间的稀有宝石之一。附言IMO 这应该是一个公认的答案。

在Chrome中测试，只有在不设置图片宽高属性的情况下才有效。

对不起，我在 jsFiddle 之外进行了测试，但无法重现。可能使用非常宽的图像的第一个小提琴。我在 Firefox、Chrome、Safari（最新版本）和 Explorer 8、9,10 中重新测试了第二把小提琴（边距：0 -9999% 0 -9999%）。在所有这些中都可以正常工作。谢谢。

【参考方案4】：

我找到了另一个解决方案

<style type="text/css">
    .container 
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     
     .containerSecond
        position: absolute; 
        top:0px; 
        left:-100%; 
        width:300%;
     
     .image
        width: 800px; //your image size 
                
</style>

在正文中

<div class="container">
   <div class="containerSecond">
       <image src="..." class="" />
   </div>
</div>

无论您的容器更大或更小，这都会使您的图像居中。在这种情况下，您的图像应该大于容器的 300% 才能不居中，但在这种情况下，您可以使 containerSecond 更大，它会起作用

【参考方案5】：

使用 css transform，在具有overflow: hidden 和设置宽度的容器内的图像：

img 
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block; /* optional */

jsFiddle here（我借用了 Mathijs Flietstra 的 jsFiddle 的一部分，非常感谢）。

【讨论】：

您还应该包含 -webkit-transform css 属性以使其在 ios 上工作。