html - 子 div 的纵横比 16/9 始终适合 CSS 中的父 div,不适用于小高度
问题描述
我正在尝试向图像添加面部叠加层,我希望面部始终位于内部 div 中。
图像需要适合 16/9 比例的背景并始终适合外部容器,我在外部 div 的高度大于 16/9 比例的情况下工作,但是每当它低于 16/9 时,它就会切断底部和头顶脱落。
我需要这个才能与 IOS 一起使用,因此纵横比在 safari 上不起作用,因此我使用了 16/9 的旧 padding-top 技巧。
谁能帮我?
我想要的是这样的东西......
但我得到的是这个......
.outside {
position: relative;
width: 500px;
height: 200px;
background: red;
overflow: hidden;
}
.inside {
height: 0;
overflow: hidden;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: 56.25%;
background: blue;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
<h1>Works when height is bigger</h1>
<div class="outside" style="height:400px!important">
<div class="inside" style="padding-top: 56.25%;">
<img src="https://solvemoji-test.s3.eu-west-2.amazonaws.com/unnamed.jpg" class="img">
</div>
</div>
<h1>Does not work when height is smaller</h1>
<div class="outside">
<div class="inside" style="padding-top: 56.25%;">
<img src="https://solvemoji-test.s3.eu-west-2.amazonaws.com/unnamed.jpg" class="img">
</div>
</div>
解决方案
假设您知道外部的高度(就像您在问题中所做的那样),您可以使用 CSS min 函数来决定内部元素的宽度和高度应该是多少,以确保它具有 16/9 的比率。
此代码段删除了 img 元素并将其替换为内部元素的背景图像。外部的高度作为 CSS 变量而不是作为高度设置传递,以便可以对其进行计算。
结果是:
.outside {
position: relative;
width: 500px;
height: calc(var(--h) * 1px);
background: red;
overflow: hidden;
}
.inside {
height: 0;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-bottom: 56.25%;
background-color: blue;
--minw: calc(var(--h) * 16px / 9);
width: min(100%, var(--minw));
background-image: url(https://solvemoji-test.s3.eu-west-2.amazonaws.com/unnamed.jpg);
background-size: auto min(100%, calc(var(--h) * 1px));
background-position: center;
background-repeat: no-repeat no-repeat;
}
<h1>Height is bigger</h1>
<div class="outside" style="--h: 400">
<div class="inside">
</div>
</div>
<h1>Height is smaller</h1>
<div class="outside" style="--h: 200;">
<div class="inside">
</div>
</div>
请注意,如果事先不知道外部的高度,那么我认为您将不得不求助于 JS 在运行时设置 --h 。
推荐阅读
- mongodb - 如何比较文档中的两个日期字段,其中一个嵌入在数组中?
- c# - 有没有办法使用搜索选项:所有目录,但在搜索文件夹的第一层后跳到下一个文件夹
- c++ - 虚幻使用什么样的反射?
- php - 如何在不使用 array_sum 的情况下将数组相加
- bash - BASH - 从文件部分读取行
- python - 合并/加入两个数据帧,一个带有 IP 地址,一个带有 IP 网络
- spring - 如何运行具有两个主要 @SpringBootApplication 文件的项目,而无需对项目的代码库进行任何更改?
- android - 如何使用 .apk 构建没有 arm64 .so 文件的 arm64-v8a 文件夹?
- rtf - 有什么方法可以更改最新版写字板的安全设置,以防止显示有关被阻止内容的消息?
- spring - 具有两个数据库的 Spring Data 抛出 IllegalArgumentException: Not an entity