时间戳

首页 > 解决方案 > 响应式调整父级内的 HTML div 大小，包括信箱和邮筒，仅 CSS

html - 响应式调整父级内的 HTML div 大小，包括信箱和邮筒，仅 CSS

问题描述

给定一个可以调整垂直和水平大小的父 HTML div 元素，我希望子 div 保持纵横比（例如，16:9），居中并受父级边缘的约束。请不要JS。

在此处输入图像描述

单独使用 CSS 是否可行？（顶部“较宽”的父图像示例是pillarbox，底部“较窄”是letterbox。）

注意：在大多数情况下，父级会小于实际的浏览器视口，因此不要根据浏览器视口的宽度或高度来判断您的答案（例如）。这应该能够在任何给定的父/子大小下独立存在。

标签： htmlcss

解决方案

如果您愿意为此使用 iframe，我有一个创造性的解决方案。

字体大小可以相对于视口大小动态更改。您想要调整容器而不是窗口的大小，因此为了使其工作，我们必须使用具有自己的视口的 iframe 包装所有内容，并调整 iframe 的大小。

这个想法是使用 em 单位设置元素的宽度和高度，并动态设置字体大小。

我们有 2 个场景，一个更宽的容器或一个更高的容器，为了将它分开，我们将使用媒体查询：

max-aspect-ratio: 16/9

1.更高的容器

由于我们希望 div 保持 16:9 的比例，我们将 div 的尺寸设置为

width: 16em;
height: 9em;

为了让它占据 100% 的宽度，我们将字体大小设置为 100/9 = 11.111 

font-size: 11.111vh

2.更宽的容器

一旦我们的媒体查询启动并且容器更宽，我们将根据视口宽度更改字体大小，并且我们希望它采用 100% 的宽度，所以 -> 100/16 = 6.25

@media (max-aspect-ratio: 16/9) {
  .ratio-wrapper {
    font-size: 6.25vw;
  }
}

现在我们可以为内容添加另一个 div 并设置我们想要的任何字体大小。

var iframe = document.getElementById('iframe');
var content = "<html>" +
  "<head>" +
  "<style>" +
  "body," +
"html {" +
"  padding: 0;" +
"  margin: 0;" +
"}" +
".ratio-wrapper {" +
"  background-color: #bada55;" +
"  font-size: 11.111vh;" +
"  width: 16em;" +
"  height: 9em;" +
"}" +
".center {" +
"  width: 100%;" +
"  height: 100%;" +
"  display: flex;" +
"  justify-content: center;" +
"  align-items: center;" +
"}" +
".content {" +
"  height: 100%;" +
"  display: flex;" +
"  justify-content: center;" +
"  align-items: center;" +
"  font-size: 20px;" +
"}" +
"@media (max-aspect-ratio: 16/9) {" +
"  .ratio-wrapper {" +
"    font-size: 6.25vw;" +
"  }" +
"}" +
  "</style>" +
  "</head>" +
  "<body>" +
    "<div class='center'>" +
	    "<div class='ratio-wrapper'>" +
		    "<div class='content'>It Works!</div>" +
	    "</div>" +
    "</div>" +
  "</body>" +
  "</html>";
iframe.src = 'data:text/html,' + encodeURIComponent(content);
.cont {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  resize: both;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
<iframe id="iframe" src="about:blank" class="cont" scrolling="no"></iframe>

请注意，我只是使用 JS 将内容添加到 iframe，所以它可以在这里工作，您只需为您的内部内容设置一个 href，不需要 JS。我使 iframe 可调整大小，因此您可以轻松地使用它，或者您可以给它一个响应大小，它也可以。

推荐阅读