html - 定位 img 水平居中，并 overflow hidden

Question

我有一张尺寸为 133px X 320px (h X w) 的图片我希望它显示在高度为:185px 的框中所以图像按比例放大，但框的宽度是动态的；

那么我如何设置我的 img，使其在框中居中而不是默认左对齐。

当前代码

#container {
  width: 30%
}

.card-image {
  overflow:hidden;
  height: 185px;
  border: solid;
}
.card-image img {
  height: 100%;
  width: auto;
}

或 plnkr

所以我想在框中看到 placehold.it 的中心，即使您调整屏幕大小也是如此

使用他们的 materializecss 有一个我不知道的选项:)

如果可能的话，如果宽度比高度大，那么图像就会达到全宽并在顶部和底部溢出

Answer 1

最简单的方法是:将您的图像作为绝对位置放在具有以下 css 属性的相对容器中:

.containerParent {
    width: 185px;
    padding-bottom: 185px;
    height: 0;
}

和你在这个 div 中的图像:

.image {
    position: absolute;
    margin: auto;
    top: -500%;
    bottom: -500%;
    left: -500%;
    right: -500%;
    display: block;
}

和任一 fitWidth:

width: 100%

或适合高度:

height: 100%;

给你。居中图像总是放大到你的父容器

jsfiddle:http://jsfiddle.net/bn94yrj7/