Question

我有一个图像滑块，所选图像设置为上方的主图像。所有图像的尺寸都不相同。如何确保每个图像都位于父div和整个父div的中心？

我现在正在使用：

width: 100%;height: 100%;object-fit:fill;

但是我的图像失去了内容的底部。我想将图像垂直居中。

我的父母div具有以下课堂风格：

.wrapper_image{
    max-width:100%;
    max-height:100%;
    min-height:100%;
    min-width: 100%;
    margin: 0 auto;
}

代码：

<div class="o-grid__col u-12/12" style="width: 400px;
          height: 400px;
          position: relative;
          display: inline-block;
          overflow: hidden;
          text-align: center;
          margin: 0;">
          <div class="mySlides wrapper_image_horses">
          <img src='url' style="width: 100%;height: 100%;object-fit:fill;">
          </div>
</div>

Answer 1

这是一个现代的解决方案，希望它将对您有帮助

DEMO

<div class="o-grid__col u-12/12" style="width: 400px;
      height: 400px;
      position: relative;
      display: inline-block;
      overflow: hidden;
      text-align: center;
      margin: 0;
      border: 1px solid #000;">
      <div class="mySlides wrapper_image_horses" style="position: absolute;
                  top: 50%; left: 50%;
                  transform: translate(-50%,-50%);">
        <img src='https://picsum.photos/id/159/200/200' style="width: auto;height: auto;">
      </div>

Answer 2

我建议您使用display: flex;来实现。借助flex，您可以更轻松地将图像对齐以垂直和水平居中。以下是我完成的测试代码。希望对您的问题有帮助

HTML

<div class="d-flex h-100">
  <div class="img-slide">
    <img src="https://via.placeholder.com/150">
  </div>
</div>

CSS

.d-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.h-100 {
  height: -webkit-fill-available;
}

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/y5fzvox8/

将任何大小的图像适合中心对齐到父级div

2 个答案: