Div中心超大图像

Question

我一直试图解决如何仅使用css将div中的超大图像居中。

我们使用的是流畅的布局，因此图像容器的宽度会随着页面宽度的变化而变化（div的高度是固定的）。图像位于div内，其值为插入框阴影，以便看起来好像是在图像中查看页面。

图像本身的大小可以填充周围div的最大值（设计值为max-width）。

如果图像小于周围的div，则很容易做到：

margin-left: auto;
margin-right: auto;
display: block; 

但是当图像大于div时，它只是从左边缘开始，偏离右边中心（我们正在使用overflow: hidden）。

我们可以分配一个width=100%，但是浏览器在调整图像大小方面做得很糟糕，而网页设计则围绕着高质量的图像。

关于图像居中的任何想法，以便overflow:hidden均匀地切断两边？

Answer 1

尝试这样的事情。无论两者的大小如何，都应该将中间任何大的元素垂直和水平地放在中间位置。

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

Answer 2

这是一个古老的Q，但是没有flexbox或者绝对位置的现代解决方案就像这样。

margin-left: 50%;
transform: translateX(-50%);

.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

那么为什么会这样呢？ 乍一看，我们似乎向右移动了50％，然后向左移动了50％。这会导致零班，那么什么呢？ 但是50％不一样，因为背景很重要。如果计算相对边距，则边距计算为父元素的百分比，而在变换中，50％相对于相同元素。两者的宽度。

在我们添加CSS之前我们有这种情况

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       +-----------------------------------------------------------+
       | Element E                                                 |
       +-----------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

添加样式margin-left: 50%我们有

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       |                     +-----------------------------------------------------------+
       |                     | Element E                                                 |
       |                     +-----------------------------------------------------------+
       |                     |                     |
       +---------------------|---------------------+
       |========= a ========>|

       a is 50% width of P

transform: translateX(-50%)向左移动

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

不幸的是，这仅适用于水平居中，因为边距百分比计算始终相对于宽度。即不仅margin-left和margin-right，而且margin-top和margin-bottom也是根据宽度计算的。

浏览器兼容性应该没问题： https://caniuse.com/#feat=transforms2d

Answer 3

在div中放置一个大div，将div放在中心，并将图像放在div中。

这是水平居中的：

HTML：

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

CSS：

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

演示：http://jsfiddle.net/Guffa/L9BnL/

为了使它垂直居中，你也可以使用相同的内部div，但你需要将图像的高度放在它内部。

Answer 4

不要对图像标记使用固定的或明确的宽度或高度。相反，编码：

      max-width:100%;
      max-height:100%;

ex：http://jsfiddle.net/xwrvxser/1/

Answer 5

游戏后期，但我发现这种方法非常直观。 https://codepen.io/adamchenwei/pen/BRNxJr

CSS

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-items: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

HTML

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>

Answer 6

我非常喜欢将图像作为div /节点的背景 - 然后您可以使用background-position: center属性将其居中，而不管屏幕大小

Answer 7

我发现这是一个更优雅的解决方案，没有flex：

<html lang= "kn">
 <head>
  <title>Raisededfg</title>

 </head>

 <body>
  <header>


 </header>
 <div class="divider"></div>
<table border="1" cellspacing="0" cellpadding="0" width="0">
    <tbody>
        <tr>
            <td colspan="3">
                <p>
                    <strong>
                        ಸಿರಿಗನ್ನಡಂ ಗೆಲ್ಗೆ  ಸಿರಿಗನ್ನಡಂ ಬಾಳ್ಗೆ 
                        <br/>
                        ಸಿರಿಗನ್ನಡಂ ಗೆಲ್ಗೆ  ಸಿರಿಗನ್ನಡಂ ಬಾಳ್ಗೆ 
                    </strong>
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <p>
                    <strong>For </strong>
                    <strong>18/10/2017</strong>
                    <strong>: </strong>
                    <strong>2</strong>
                </p>
            </td>
        </tr>
        <tr>
            <td width="179">
                <p>
                    <strong>ಹುಟ್ಟು</strong>
                </p>
            </td>
            <td width="70">
                <p align="center">
                    <strong>ಕನಿಷ್ಠ</strong>
                </p>
            </td>
            <td width="70">
                <p align="center">
                    <strong>ಗರಿಷ್ಠ</strong>
                </p>
            </td>
        </tr>
        <tr>
            <td>
                <p>
                    <strong>Cere</strong>
                </p>
            </td>

        </tr>

    </tbody>
</table>



</body>
</html>

Answer 8

以@yunzen的出色答案为基础：

我猜很多搜索此主题的人都在尝试使用大图像作为“英雄”背景图像，例如在首页上。在这种情况下，他们通常会希望文本出现在图像上并在移动设备上很好地缩放。

这是用于此类背景图像的完美CSS（在<img>标签上使用）：

/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;

/* Move to the left by 50% of own width */
transform: translateX(-50%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;

Answer 9

宽度和高度仅用于举例：

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

如果父div的左侧和顶部不是屏幕窗口的顶部和左侧，它必须适合您。它对我有用。

Answer 10

您可以使用的一个选项是object-fit: cover，它的行为有点像background-size: cover。有关object-fit的更多信息。

忽略下面的所有JS，仅用于演示。

这里的关键是您需要在包装器中设置图像并为其提供以下属性。

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

我在下面创建了一个演示，您在其中更改包装器的高度/宽度并在游戏中查看。图像将始终垂直和水平居中。它将占据其父代宽度和高度的100％，并且不会被拉伸/挤压。这意味着可以保持图像的纵横比。可以通过放大/缩小来应用更改。

object-fit的唯一缺点是它在IE11上doesn't work。

// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');


const resizeWrapper = () => {
  wrapper.style.width = widthInput.value + "px";
  wrapper.style.height = heightInput.value + "px";
}

button.addEventListener("click", resizeWrapper);

.wrapper {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 2em;
  border: 1px solid red;
}

.wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.imgur.com/DrzMS8i.png">
</div>


<!-- demo only -->
<lable for="width">
  Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
  height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>

Answer 11

基于@Guffa答案
因为我花了超过2个小时才使非常宽的图像居中，
对我来说，图像尺寸为2500x100px，视口为1600x1200或Full HD 1900x1200 这样的作品居中：

 .imageContainer {
  height: 100px;
  overflow: hidden;
  position: relative;
 }
 .imageCenter {
  width: auto;
  position: absolute;
  left: -10%;
  top: 0;
  margin-left: -500px;
 }
.imageCenter img {
 display: block;
 margin: 0 auto;
 }

我希望这可以帮助其他人更快地完成任务：）

Answer 12

这很简单，将一些flex和溢出设置为隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            height: 150px;
            width: 150px;
            border: 2px solid red;
        
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div>
        <img src="sun.jpg" alt="">
    </div>
</body>
</html>