0

我有一个占屏幕约 75% 的视口，我使用object-fit: containcss 将不同纵横比的单个图像放入其中。在图像上方，我有文件名和类型的文本标签。我想保持这些对齐以从图像的最左边开始并在最右边结束。<img>我可以通过将它们与标签对齐来轻松做到这一点。

使用的一个副作用object-fit: contain是<img>元素比可视图片大，所以当我尝试将文本对齐时，<img>它可能会出现文本漂浮在图像之外。

img当标签扩展以适应整个视口但实际图片在img标签内自动缩放时，如何将文本与可视图像对齐object-fit: contain？

4

1 回答 1

1

该解决方案在很大程度上取决于标记、固定宽度和/或高度等。

假设您事先不知道它们的宽度/高度，您将需要一个脚本，如下面的示例所示。

更新：我同时添加了opacity图像和文本显示。

如果你知道它们，你仍然需要制定一堆 CSS 动画规则，包括它们的比例和动画设置以使其看起来不错，这可以做到，但需要一些工作。这个答案的最后是一个示例，如何根据fit-content计算大小的相同方式设置元素大小。

document.querySelector('img').addEventListener('load', function(e) {
  document.querySelector('.image-text').style.cssText = 'width: ' + e.target.width +'px; opacity: 1;';
})
.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}

.image-wrap img {         /*  fit-content replacement  */
  position: relative;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.image-text {
  opacity: 0;
  margin: 0 auto;
}
<div class="image-text">Some text we want to size and break at the same width as the image</div>
<div class="image-wrap">
  <img src="http://placehold.it/500x400" alt="some image here" />
</div>

这是另一篇关于获取自然和缩放大小的图像的帖子：

于 2017-03-03T07:43:34.063 回答