Question

编辑：

http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead

如何根据容器高度垂直居中图像。

鉴于容器高度是固定的，图像大小是动态的。

目前只显示图像的上半部分，因为我们使用overflow：hide;。

由于

Answer 1

您可以将图片CSS设置为height: 100%。

请提供一些代码，以便我们为您解决问题提供帮助。

Answer 2

<强>的Photoshop

最简单的解决方案显然是在这里的Photoshop;你可以调整图像大小。

<强> CSS

您可以使用CSS属性background-image。 img标记不是为了隐藏图像的一部分，而是为了调整大小。

为此，您可以使用以下示例：

background-position: 0px -60px;

该属性是创建适合幻灯片放映的背景图像的关键。然而;您需要手动更改所有图像。

您使用background-position的示例：

＆＃13;

.slider-nav-crop4 {
  /*this is your image with ~60px white space above */
  background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px -60px; 
}

＆＃13;

<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;">
  
</div>

＆＃13;

定位图片

这实际上是一个可以为每个图像设置的黑客，但它可能有点棘手。

您可以将图像置于绝对位置，为其设置负top设置并使图像大于容器，设置为overflow:hidden。

例如

＆＃13;

.item .crop-image {
  height:200px;
  position:relative;
  overflow:hidden;
}

.crop-image img {
  position:absolute;
  top:-40px;
  height:300px;
}

＆＃13;

<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;">

  <div class="item item1" style="border-radius:8px;">
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;">
      <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide">
    </div>
  </div>

  <div class="item item1 active left" style="border-radius:8px;">
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;">
      <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide">
    </div>
  </div>

  <div class="item item1 next left" style="border-radius:8px;">
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;">
      <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide">
    </div>
  </div>
                                                            </div>

＆＃13;

Answer 3

让我们说你的代码是，

<div class="image">
    <img scr="Image_path" alt="" />
</div>

CSS

.image{
    position: relative;
}
.image img{
    margin: auto; //horizontally align center
    position: absolute; //vertically align center
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

希望这会奏效。

Answer 4

方法1：

container {
display: table;
vertical align: middle;
}
img {
display: table-cell;
vertical align: middle;
}

方法2：

container {
position: relative;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

方法3：

container {
height: 300px;
line-height: 300px;
}

在css中，垂直对齐是一个非常讨论的主题，这是许多例子中的3个。尽力使用。

根据容器高度垂直居中图像

4 个答案: