如何将文本与图像自动缩放为物体适合：包含

我有一个视口，占用大约75％的屏幕，并使用object-fit: contain css将不同宽高比的单幅图像融入到视图中。在图像上方，我有用于文件名&类型的文本标签。我想保持这些对齐，从图像的最左边开始，结束于最右边。我可以很容易地将它们与<img>标签对齐。使用object-fit: contain的如何将文本与图像自动缩放为物体适合：包含

一个副作用是，<img>元件比可视画面大，所以当我尝试对齐文本到<img>它可以出现文本被浮起的图像。

我如何对齐文本的可视图像，当img标签扩展，以适应整个视口，但实际的图片会自动定使用object-fit: contain的img标签里面？

来源

2017-03-03 Adam James

既然你装修的图片内部交流你为什么不把标签与视口/容器对齐？ – junkfoodjunkie

这就是我们所做的，但为了动态自动缩放图像到容器而不丢失宽高比，我们在CSS中设置了“object-fit：contains”，这使得'img'标签占据了100％宽度和100 ％容器的高度，但动态缩放该“img”标签内的实际图片。所以元素本身占据了100％的宽度，但是它内部的图片不一定是相同的，当文本到达末端时图像只剩下75％集装箱宽 –

的解决方案是非常依赖于标记，固定宽度和/或高度等

假设你不知道他们的宽度/高度提前，你需要一个脚本，如下样本。

更新：我添加了opacity，所以图像和文字显示在同一时间。

如果你知道他们，你仍然需要制定一堆CSS动画规则，覆盖他们的比例和动画设置，使其看起来很好，可以完成，尽管这需要一些工作。在this answer的末尾是一个示例，如何根据相同的方式设置元素大小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>

这里是另一篇文章有关获取的图像自然和缩放尺寸：

object-fit: get resulting dimensions

来源

2017-03-03 07:43:34 LGSon

谢谢你为我们工作 –

如何将文本与图像自动缩放为物体适合：包含

回答

相关问题