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%

或fitHeight：

height: 100%;

你去吧。居中的图像总是按比例放大到您的父容器

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

Answer 2

除非我误解你，否则你可以使用CSS和background-size：cover来实现这种效果

查看示例： https://jsfiddle.net/rrjpca5d/

.box {
    height: 133px;
    width: 320px;
   background: url(http://theludonarrative.com/wp-content/uploads/2014/03/2014-03-11_00010.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 3

修正了它：

#container {
  width: 50%;
  max-width: 350px;
}

.card-image {
  height: 185px;
  position: relative;
  overflow: hidden;
  border: solid;
}

.card-image img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  height: 100%;
}

定位img水平中心，并隐藏溢出

3 个答案: