隐藏图像底部 20 像素，必要时按比例缩小答案

【问题标题】：Hide bottom 20px of an image, scale down if necessary隐藏图像底部 20 像素，必要时按比例缩小
【发布时间】：2023-04-06 03:14:02
【问题描述】：

我经营一个照片博客，我发布的每个图像文件的底部都有一个 20 像素高的“页脚”，其中包含一些版权信息。现在，我只需要那些以防有人保存图片的热链接；我不需要在我自己的网站上显示页脚，所以我通过用这样的白色 div 覆盖每张照片的底部 20px 来隐藏它们：

<style>
    .photo_container {
        position: relative;
    }
    .footer_hide {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 20px;
        width: 100%;
        background: #fff;
    }
</style>

<div class="photo_container">
    <img src="photo.jpg">
    <div class="footer_hide"></div>
</div>

这适用于以 100% 大小显示的图像，但为了使我的网站适合移动设备，我将它们缩小以适应较小的视口：

.photo_container img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

显然，“页脚隐藏器”无论如何都保持 20 像素高。假设图像的尺寸未知/可变，是否有任何纯 CSS 方法可以相应地缩小它（或者可能是一种完全不同的方法来实现我在这里想要实现的目标）？

【问题讨论】：

除了在覆盖 div 上使用 % 值之外，我不确定如何。页脚是总高度的固定百分比值吗？
@Paulie_D 不，高度是可变的，页脚在 100% 高度处始终为 20px。
那不行，恐怕不行。需要计算容器的高度，然后计算覆盖层的高度……为此，您需要 javascript。
如果您使用“rem”单位而不是“px”会怎样？在这种情况下，隐藏器大小将取决于 html 标签字体大小定义，默认情况下隐藏器高度将根据屏幕大小进行缩放。像“身高：1.5rem;”这样的东西在 .footer_hide 中。

标签： css

【解决方案1】：

是的。 Flexbox 非常适合这一点，在移动视图和桌面视图中检查一下，这太棒了，它甚至可以在没有媒体查询的情况下工作。您也可以只展开 codepen 以查看效果。只需将 xyz 类视为您的页脚。

.xyz {
 width: 70%;

box-shadow: 0 0 30px;
text-align:center;
-webkit-flex: 9 0 0; 
flex: 9 0 0; 
}

codepen 的链接

http://codepen.io/damianocel/pen/XmxmQE

您显然必须对代码进行相当多的更改，但这是我认为的最佳解决方案。

【讨论】：