水平居中溢出图像

Question

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

你说的问题确实很相似，但是他们两个的答案都不适合我...还是谢谢你

Answer 1

要在较小的容器中包含大图像，您必须决定 "visually resize" 图像的内容如下：

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

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

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

Answer 2

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

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>

水平居中溢出图像

Center overflown image horizontally

html

css

image

center