中心超大图像在div [英] center oversized image in div

问题描述

我一直在尝试使用css只解决如何在一个div中放大图像。

我们使用的是流体布局，图像容器随着页面宽度而变化（div的高度是固定的）。

图片本身已经调整大小以填满图片

如果图像小于周围的div，那么很容易做到这一点：

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

但是当图像大于div时，它只是从左边缘开始， （我们使用overflow：hidden）。

我们可以分配一个width = 100％，但浏览器做一个糟糕的工作，调整图像大小，

任何关于图像居中的想法，感谢

解决方案

尝试这样。

  .parent是什么意思？ {
 position：relative; 
 overflow：hidden; 
} 
 
 .child {
 position：absolute; 
 top：-9999px; 
 bottom：-9999px; 
 left：-9999px; 
 right：-9999px; 
 margin：auto; 
 
} 
  

I have been trying to sort out how to center an oversized image within a div using css only.

We are using a fluid layout, so the width of the image containers varies as the page width does (height of div is fixed). The image sits within a div, withvalue an inset boxshadow so as to appear as if you are looking through the page at the image.

The image itself has been sized to fill the surrounding div at its widest possible value (the design has a max-width value).

It is pretty easy to do if the image is smaller than the surrounding div:

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

But when the image is larger than the div it simply starts at the left edge and is off center to the right (we are using overflow: hidden).

We could assign a width=100%, but browsers do a lousy job of resizing images and the webdesign centers around high quality imagery.

Any ideas on centering the image so that overflow:hidden cuts off both edges evenly?

Thanks

解决方案

Try something like this. This should center any huge element in the middle vertically and horizontally with respect to its parent no matter both of their sizes.

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

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

}

这篇关于中心超大图像在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！