CSS 响应式 div 防止切断并隐藏溢出

Question

我将此布局用于保持宽高比的响应式 div。它运行良好，但它需要 overflow: hidden，以明确它是 :after 中定义的 padding-top: 56.25%。如果包装器上没有溢出，则下一个元素（在本例中为 href link）被阻止。

我的问题是：有没有一种方法可以在不使用包装器 overflow: hidden 的情况下实现相同的结果？我需要一些元素在不被切断的情况下在包装外可见。

如果您在小 window 中看不到问题，请在整页中打开代码段。

#wrapper {
  position: relative;
  max-width: 1000px;
  min-width: 350px;
  max-height: 383px;
  border: 1px solid;
  /*overflow:hidden;*/
}

#wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
  background: rgba(0,0,0,.25);
}

<div id="wrapper"></div>
<a href="#">click me</a>

Answer 1

您可以添加一个内部 div 并像以前一样使用伪元素使其响应，然后在其上应用 overflow: hidden;。然后添加另一个兄弟 div 并设置您希望应用的样式，在示例中为 div #test，如您所见，它将在包装器外部可见。

#wrapper {
  position: relative;
  max-width: 1000px;
  border: 1px solid;
}

#inner {
  min-width: 350px;
  max-height: 383px;
  overflow: hidden;
}

#inner:after {
  background: rgba(0,0,0,.25);
  padding-top: 56.25%;
  display: block;
  content: '';
}

#test {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  width: 100px;
  height: 50px;
  background: aqua;
}

<div id="wrapper">
  <div id="inner"></div>
  <div id="test"></div>
</div>
<a href="#">click me</a>

CSS 响应式 div 防止切断并隐藏溢出

CSS responsive div prevent cutting off with overflow hidden

css

overflow

aspect-ratio

responsive-design