中心图像在div，溢出隐藏 [英] center image in div with overflow hidden

问题描述

我有一个400像素的图像和一个更小的div（宽度不总是300px像我的例子）。我想将图片置于div中心，如果有溢出，请将其隐藏。

I have an image of 400px and a div that is smaller(the width is not always 300px as in my example). I want to center the image in the div, and if there is an overflow, hide it.

注意：我必须保持位置：绝对的位置。我使用css转换，如果我使用position：relative，我的图像摇了一下（ http://bit.ly/MaYbMB）。

Note: I must keep the position:absolute on the imgage. I'm working with css-transitions, and if I use position:relative, my image shakes a bit ( http://bit.ly/MaYbMB ).

jsfiddle
http://jsfiddle.net / wjw83 / 1 /

jsfiddle http://jsfiddle.net/wjw83/1/

推荐答案

你应该使容器相对，给它一个高度，

You should make the container relative and give it a height as well and you're done.

http://jsfiddle.net/jaap/wjw83 / 4 /

.main{
  width:300px;
  margin: 0 auto;
  overflow:hidden;
  position: relative;
  height: 200px;
}

img.absolute{
  left: 50%;
  margin-left: -200px;
  position:absolute;
}

如果您愿意，也可以通过添加负边距和顶部位置： http://jsfiddle.net/jaap/wjw83/5/

If you want to you can also center the image vertically by adding a negative margin and top position: http://jsfiddle.net/jaap/wjw83/5/

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