首页 文章

Div中心超大图像

提问于
浏览 次
150

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

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

图像本身已经调整大小以尽可能广泛地填充周围的div（设计具有 max-width 值） .

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

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

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

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

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

css

8 回答

  • 346

    宽度和高度仅用于举例：

    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的左侧和顶部不是屏幕窗口的顶部和左侧，它必须适合您 . 这个对我有用 .

    回复于
  • 1

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

    .wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}
    回复于
  • 0

    尝试这样的事情 . 无论两者的大小如何，这都应该使中间的任何大元素垂直和水平地相对于其父元素居中 .

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

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

}
    回复于
  • 4

    这是一个古老的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％不一样，因为背景很重要 . 如果计算相对边距，则边距计算为 parent 元素的百分比，而在变换中，50％相对于 same 元素 . 两者的宽度 .

    在添加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

    回复于
  • 110

    在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，但你需要将图像的高度放在它内部 .

    回复于
  • 3

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

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

    例如：http://jsfiddle.net/xwrvxser/1/

    回复于
  • 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-item: 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>
    回复于
  • 22

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

    回复于

相关问题