javascript - 将图片居中并缩放高度/宽度以适合flexbox父级？

我正在尝试居中缩放容器中的图像。在下图中，粉红色的框是16:9的容器，蓝色的框是图像。


如果图像的比容器的宽，它将缩放以适合。


如果图像的比容器的高，则图像也将缩放以适合。


如果图像适合容器，它将仅居中。

正如您在图中所看到的，还有一个标题 div对齐到图像的左下角，还有一个关闭图标对齐到右上角。

这是我现在拥有的代码:

/* The page */
.container {
  width: 100%;
  height: 100%;
}

/* 16:9 container */
.imageWrapper {
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
  border: 1px solid red;
}

.imageInnerWrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The image, footer and close button all need to fit inside the container */
.imageAndFooterWrapper {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  border: 1px solid lightblue;
}

.image {
  max-height: 100%;
  object-fit: contain;
}

.footer {
  text-align: left;
}

.closeButton {
  position: absolute;
  top: -30px;
  right: -30px;
}

<div class="container">
  <div class="imageWrapper">
    <div class="imageInnerWrapper">
      <div class="imageAndFooterWrapper">
        <img class="image" src="https://images.theconversation.com/files/204986/original/file-20180206-14104-1hyhea9.jpg?ixlib=rb-1.1.0&rect=0%2C1212%2C5550%2C2775&q=45&auto=format&w=1356&h=668&fit=crop">
        <div class="footer">
          Caption
        </div>
        <div class="closeButton">X</div>
      </div>
    </div>
  </div>
</div>

以下CodePen包含以上代码，并提供了一些不同大小图像的示例。

https://codepen.io/anon/pen/NMKxxm

最佳答案

这可能不是您问题的直接答案，但是通常当我必须执行类似操作时，我使用带有背景图像的div而不是img标记。通过将div与bg图像一起使用，可以使用background-image，background-position和background-size之类的样式，这些样式可以创建您所描述的效果。

样品:

var imgDiv = $('.image')[0];
var closeButton = $('.fixed-el')[0];
var img = document.createElement('img');
img.src = getComputedStyle(imgDiv).backgroundImage.split('"')[1];

var calculate_positions = {
  img_width: img.naturalWidth,
  img_height: img.naturalHeight,
  img_ratio: function() {
    return calculate_positions.img_width / calculate_positions.img_height;
  },
  elm_ratio: function(elm) {
    return $(elm).width() / $(elm).height();
  },
  img_offset: function(elm) {
    var offset = []; //[x,y]

    if (calculate_positions.elm_ratio(elm) > calculate_positions.img_ratio()) {
      //centered x height 100%
      var scale_percent = $(elm).height() / calculate_positions.img_height;
      var scaled_width = calculate_positions.img_width * scale_percent;
      var x_offset = ($(elm).width() - scaled_width) / 2;
      offset = [x_offset, 0];
    } else {
      //centered y width 100%
      var scale_percent = $(elm).width() / calculate_positions.img_width;
      var scaled_height = calculate_positions.img_height * scale_percent;
      var y_offset = ($(elm).height() - scaled_height) / 2;
      offset = [0, y_offset];
    }
    return offset;
  }
}

function updatePosition() {
  var offset = calculate_positions.img_offset($('div.image'));
  closeButton.style.top = offset[1] + 'px';
  closeButton.style.left = offset[0] + 'px';
}
$(window).resize(updatePosition)
$(img).load(function() {
  updatePosition();
});

div.image {
  width: 100%;
  background-image: url('http://via.placeholder.com/100x100');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex: 1;
}

html,
body,
div.container {
  width: 100%;
  height: 100%
}

div.container {
  display: flex;
  position: relative;
  flex-direction: column;
}

div.fixed-el {
  position: absolute;
  width: 20px;
  height: 20px;
  background: red;
}

div.caption {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="image"></div>
  <div class="caption">Some caption here</div>
  <div class="fixed-el"></div>
</div>

编辑:
您可以更改样式中的图像大小，并调整窗口大小以查看实际缩放比例。

我还注意到评论中提到您不想使用背景图像，因为它将剪切图像。如果使用background-size:contain，则不会发生这种情况

编辑2:
事实证明，您实际上可以弄清楚图像的坐标是什么，并在图像周围放置其他元素。已经创建了一个肮脏的技巧来演示这一点(混合jQuery和 Vanilla JS，没有适当的作用域等)。但是您应该能够掌握主要思想并实现更整洁的解决方案。主要思想源自this question on SO

关于javascript - 将图片居中并缩放高度/宽度以适合flexbox父级？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49871930/