隐藏溢出的 div 中的中心图像
[英]center image in div with overflow hidden
问题描述
I have an image of 400px and a div that is smaller (the width is not always 300px as in my example).
我有一个 400px 的图像和一个更小的 div（宽度并不总是 300px，如我的示例）。 I want to center the image in the div, and if there is an overflow, hide it.我想将图像在div中居中，如果有溢出，请将其隐藏。
Note: I must keep the position:absolute on the image.注意：我必须保持图像上的position:absolute 。 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/ ).我正在使用 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/
12 个解决方案
解决方案1
34 已采纳 2012-05-31 09:33:04
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/
解决方案2
25 2015-08-24 20:31:59
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的圆形父容器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
解决方案3
16 2019-03-20 22:47:34
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 */
}
解决方案4
6 2016-01-21 14:07:39
Found this nice solution by MELISSA PENTA ( https://www.localwisdom.com/ )通过 MELISSA PENTA ( https://www.localwisdom.com/ ) 找到了这个不错的解决方案
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在 div 中居中任何大小的图像
Used with rounded wrapper and different sized images.与圆形包装器和不同大小的图像一起使用。
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;
}
解决方案5
5 2019-06-28 07:39:00
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%;
}
解决方案6
2 2012-05-31 09:42:07
<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>
解决方案7
1 2012-05-31 09:30:22
you the have to corp your image from sides to hide it try this你必须从侧面合并你的形象来隐藏它试试这个
3 Easy and Fast CSS Techniques for Faux Image Cropping | 3 个简单快速的 CSS 技术，用于人造图像裁剪 | Css ... css ...
one of the demo for the first way on the site above上面网站上第一种方式的演示之一
i will do some reading on it too我也会做一些阅读
解决方案8
1 2012-05-31 11:56:20
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;只需确保您如何通过 css 背景使用图像使用背景图像位置，如 background: url(your image path) no-repeat center center; automatically it wil align center to the screen.它会自动将中心与屏幕对齐。
解决方案9
1 2013-05-24 18:40:50
this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div.这似乎适用于我们的网站，使用您的想法和基于包装器 div 左边缘的一些数学运算。 It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.向左移动 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>
解决方案10
1 2020-11-19 07:06:50
working solution with flex-box for posterity:为后代使用flex-box工作解决方案：
main points:要点：
- overflow hidden for wrapper为包装器隐藏溢出
- image height and width must be specified, cannot be percentage.图片高度和宽度必须指定，不能是百分比。
- use any method you want to center the image.使用您想要将图像居中的任何方法。
wrapper {
width: 80;
height: 80;
overflow: hidden;
align-items: center;
justify-content: center;
}
image {
width: min-content;
height: min-content;
}
解决方案11
0 2014-01-13 21:09:13
I have been trying to implement Jaap's answer inside this page of my recent site, with one difference : the .main {height:} was set to auto instead of a fixed px value.我一直试图在我最近网站的这个页面中实现 Jaap 的回答，有一个区别：.main {height:} 被设置为 auto 而不是固定的 px 值。 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.您可以通过慢慢缩小浏览器的宽度来模拟这种行为。
解决方案12
0 2014-07-24 21:29:36
This issue is a huge pain in the a.. but I finally got it.这个问题是一个巨大的痛苦......但我终于明白了。 I've seen a lot of complicated solutions.我见过很多复杂的解决方案。 This is so simple now that I see it.这很简单，我现在看到了。
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.