水平居中溢出图像[重复]答案

【问题标题】：Center overflown image horizontally [duplicate]水平居中溢出图像[重复]
【发布时间】：2016-01-06 07:57:41
【问题描述】：

我需要将带有min-width: 968px 的水平图像放在一个较小的容器中。我可以按我想要的大小插入它，然后用overflow: hidden 将它剪成我想要的样子...
我已经尝试了所有正常的方法，但似乎没有任何效果......
有什么想法吗？

你说的问题确实很相似，但是他们两个的答案对我都不起作用……还是谢谢你

【问题讨论】：

你今天早些时候已经问过这个问题，答案保持不变。如果您在执行正确的方法时遇到问题，请制作一个小提琴，以便我们向您展示如何做到这一点。
@SteynvanEsveld 问题变了，答案不符合我的要求......所以，不，这不是同一个问题......

标签： html css image center

【解决方案1】：

您可以为此使用绝对位置。不要忘记在父级上将位置设置为相对。然后您可以使用翻译技巧来确保您的图像将水平和垂直居中（参见示例）：

div {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}
div img {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div>
  <img src="http://lorempixel.com/400/200/" alt="" />
</div>

【讨论】：

【解决方案2】：

要在较小的容器中包含大图像，您必须决定使用以下内容“视觉调整”图像：

img
{
  max-width:100%;
  height:auto;
  dsplay:block;
}

或者您可以在背景中对其进行转换，保留其原始尺寸，但显然切割会溢出，所以：

div
{
   width:300px;
   height:200px;
   background-image:url(image.jpg)
   background-position:50% 50%;
}

【讨论】：

我已经尝试了这两种方法，但是当我阅读您的答案时，我认为如果 div 大小与 img 不同，您给出的第二个选项是完美的。然后我记得如果我有一个图像作为背景，并且在 div 中有另一个不透明度为 0 的图像来获得可变大小，它会完美地工作......而且它确实......