Html 隐藏溢出的 div 中的中心图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10830735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
center image in div with overflow hidden
提问by Puyol
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.
我有一个 400px 的图像和一个更小的 div（宽度并不总是 300px，如我的示例）。我想将图像在div中居中，如果有溢出，请将其隐藏。
Note: I must keep the position:absoluteon the image. I'm working with css-transitions, and if I use position:relative, my image shakes a bit (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/).
注意：我必须保留position:absolute图像上的 。我正在使用 css-transitions，如果我使用position:relative，我的图像会有点抖动（https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/）。
jsfiddle http://jsfiddle.net/wjw83/1/
jsfiddle http://jsfiddle.net/wjw83/1/
采纳答案by Jaap
You should make the container relative and give it a height as well and you're done.
你应该使容器相对并给它一个高度，你就完成了。
http://jsfiddle.net/jaap/wjw83/4/
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;
}<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />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/
如果你愿意，你也可以通过添加负边距和顶部位置来垂直居中图像：http: //jsfiddle.net/jaap/wjw83/5/
回答by Simon G
None of the above solutions were working out well for me. I needed a dynamic image size to fit in a circular parent container with overflow:hidden
上述解决方案均不适合我。我需要一个动态图像大小以适合圆形父容器overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
Working example here: http://codepen.io/simgooder/pen/yNmXer
这里的工作示例：http: //codepen.io/simgooder/pen/yNmXer
回答by Egle Kreivyte
Found this nice solutionby MELISSA PENTA
由 MELISSA PENTA找到了这个不错的解决方案
HTML
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
Center any size image in div
Used with rounded wrapper and different sized images.
在 div 中居中任何大小的图像
与圆形包装器和不同大小的图像一起使用。
CSS
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
Working example here codepen
此处的工作示例codepen
回答by GilCarvalhoDev
Most recent solution:
最新的解决方案：
HTML
HTML
<div class="parent">
<img src="image.jpg" height="600" width="600"/>
</div>
CSS
CSS
.parent {
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
回答by lisa-bob
For me flex-box worked perfect to center the image.
对我来说 flex-box 可以完美地将图像居中。
this is my html-code:
这是我的 html 代码：
<div class="img-wrapper">
<img src="..." >
</div>
and this i used for css: I wanted the Image same wide as the wrapper-element, but if the height is greater than the height of the wrapper-element it should be "cropped"/not displayed.
这是我用于 css 的：我希望图像与包装元素的宽度相同，但是如果高度大于包装元素的高度，则应该“裁剪”/不显示。
.img-wrapper{
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: auto;
width: 100%;
}
回答by Elham
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
回答by Gopikrishna
just make sure how you are using image through css background use backgroud image position like background: url(your image path) no-repeat center center; automatically it wil align center to the screen.
只需确保您如何通过 css 背景使用图像使用背景图像位置，如背景： url(your image path) no-repeat center center; 它会自动将中心与屏幕对齐。
回答by dhaupin
this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div. It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.
这似乎适用于我们的网站，使用您的想法和基于包装器 div 左边缘的一些数学运算。向左移动 50% 然后取出 50% 的额外边距似乎是多余的，但它似乎有效。
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
回答by shareef
you the have to corp your image from sides to hide it try this
你必须从侧面合并你的形象来隐藏它试试这个
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
3 个简单快速的 CSS 技术，用于人造图像裁剪 | css ...
one of the demo for the first way on the site above
上面网站上第一种方式的演示之一
i will do some reading on it too
我也会做一些阅读
回答by makani photography
I have been trying to implement Jaap's answer inside this pageof my recent site, with one difference : the .main {height:} was set to auto instead of a fixed px value. As responsive developer i am looking for a solution to synchronize the image height with the left floating text element, yet only in case my text height becomes greater then my actual image height. In that case the image should not be rescaled, but cropped and centered as decribed in the original question here above. Can this be done ? You can simulate the behaviour by slowly downsizing the browser's width.
我一直试图在我最近网站的这个页面中实现 Jaap 的回答，有一个区别：.main {height:} 被设置为 auto 而不是固定的 px 值。作为响应式开发人员，我正在寻找一种解决方案来将图像高度与左侧浮动文本元素同步，但前提是我的文本高度大于我的实际图像高度。在这种情况下，图像不应重新缩放，而应按照上面原始问题中的描述进行裁剪和居中。这能做到吗？您可以通过慢慢缩小浏览器的宽度来模拟这种行为。
