将一个未知大小的大图像放在一个较小的div中，并将其隐藏起来
我想在一个没有JavaScript和没有背景图像的div中心img。
这里是一些示例代码
<div> <img src="/happy_cat.png"/> </div> - 我不知道img的大小，它应该能够超过父级的宽度
- 我不知道父div的宽度（这是100％）
- 父div有一个固定的高度
- 图像比父级大，父级溢出：隐藏
- 只需要支持现代浏览器
期望的结果。 （忽略不透明等，只需注意定位）。
我知道这可以很容易地完成与背景图像，但这不是我的select。 我也可以使用JavaScript，但它似乎是一个非常重的方式来实现这一目标。
谢谢！
插口
那这个呢：
.img { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); }
这假定父div被定位相对。 我认为这是有效的，如果你想让.img相对定位而不是绝对的。 只需删除position: absolute ，并将顶部/左侧更改为页margin-top和页margin-left 。
你可能想要添加浏览器支持与transform ， -moz-transform等
老问题，新答案：
当图像大于包装div时，text-align：center或margin：auto将不起作用。 但是如果图像较小，那么具有绝对定位或负左边界的解决scheme将产生奇怪的效果。
所以当图像大小实际上并不是事先知道的（比如在CSM上），它可能大于或小于包装div，有一个优雅的CSS3解决scheme，可以满足所有用途：
div { display: flex; justify-content: center; height: 400px; /* or other desired height */ overflow: hidden; } img { flex: none; /* keep aspect ratio */ }
请注意，根据样式表中的其他规则，您可能需要在img上添加width：auto和/或max-width：none。
这总是有点棘手，有很多解决scheme。 我觉得最好的解决办法是以下几点。 这将它垂直和水平居中。
CSS
#container { height: 400px; width: 400px; } .image { background: white; width: 100%; height: 100%; position: relative; overflow: hidden; } .left { width: 100px; height: 100%; z-index: 2; background: white; top: 0px; position: absolute; left: 0px; } .right { width: 100px; height: 100%; z-index: 2; position: absolute; background: white; top: 0px; right: 0px; } .image img { margin: auto; display: block; }
HTML
<div id="container"> <div class="image"> <div class="left"></div> <div class="right"></div> <img width="500" src="https://www.google.com.auhttp://img.dovov.comsrpr/logo11w.png" /> </div>
看小提琴
略有不同的技巧： 小提琴
感谢大家的帮助。 我只会考虑在CSS中无法实现。
我将转向一个jQuery解决scheme。 这是一些感兴趣的[伪]代码。
我打算放弃一个CSS解决scheme，但看起来可以完成（见公认的答案）。 这是我要去的JS解决scheme。
var $img = $('img'), w = $img.width(); $img.css({marginLeft: -w});
和随行的CSS
img{ position:absolute; left:50%; }
我知道这是旧的，但我也想出了一个纯粹的CSS解决scheme非常类似于上述。
.parent { float: left; position: relative; width: 14.529%; // Adjust to your needs } .parent img { margin: auto; max-width: none; // this was needed for my particular instance position: absolute; top: 11px; right: -50%; bottom: 0; left: -50%; z-index: 0; }
只需初始化您的图像的位置如下。
HTML：
<div> <img id="img" src="/happy_cat.png"/> </div>
CSS：
#img { left: 0; right: 0; }
或者用margin: auto;来看margin: auto;
这是水平alignment。 为了使它垂直alignment，你可以做一个display: table-cell; 到你的<div>然后vertical-align: middle; 但是这不是一个好的做法，因为你的<div>不是一张表。
