css - 如何在没有滚动条的情况下在视口(viewport)中显示缩放后的图像和文本？

Question

我有以下 html:

<div class="wrapper">
    <img class="img" src="img.png">
    <div clas="text">
        This is sample text.<br/>
        This is sample text.
    </div>
</div>

我还有以下 CSS:

    .wrapper {
        width: 1200px;
        margin: 0 auto;
    }

图像可以很大(宽度为 4000 像素，高度为 3000 像素)。我无法设置 div.wrapper 的高度。我也不能假设文本的数量。如何使用 CSS 在没有垂直滚动条的情况下在视口(viewport)中显示完全缩小的图像和文本？

这是 jsfidille 中的示例 https://jsfiddle.net/c2q1w1tq/2/

Answer 1

如果您对还涉及 javascript 的解决方案没有问题，您可以使用这个:

function updateImageHeight() {
    textHeight = $('.wrapper').height() - $('.wrapper img.img').height()
    imgMaxHeight = $('.container').height() - textHeight
    $('.wrapper img.img').height(imgMaxHeight)
}
$(function() {
    updateImageHeight();
});
$(window).on('resize', function() {
    updateImageHeight();
})

I used jquery here

$(window).on('resize' 也将为您提供调整窗口大小的解决方案。

这是一个有效的 jsfiddle:
https://jsfiddle.net/Ly8sac3v/

(我删除了 html/body 元素的 margin/padding 并将所有内容包装在一个容器中。如果你不能这样做，你可以将上面的代码与 body 元素一起使用，但是你那里可能需要一些改变)。