具有纵横比和查询的响应式大小答案

【问题标题】：Responsive size with aspect ratio and query具有纵横比和查询的响应式大小
【发布时间】：2018-05-02 13:25:03
【问题描述】：

我有 2 个 div，左边一个是流动的并且有纵横比，右边一个有固定的宽度。我希望右 div 低于 600px 低于左 div（并变为 100% 宽度），而左 div 必须在窗口缩小时保持纵横比。并且包装器 div 显然必须具有两个子 div 的高度。是否可以用 css 做到这一点？

<div class="wrapper">
  <div class="a">
    This is your div with the specified aspect ratio.
  </div>
  <div class="b"></div>
</div>

Fiddle

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

您可以使用 flex-box 来实现。

.wrapper{
  display: flex;
}

.wrapper .a{
  flex-grow: 1;
  // Presentational styles
  background: deepskyblue url('https://res.cloudinary.com/sivadass/image/upload/v1493620046/dummy-products/cauliflower.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.wrapper .b{
  flex-basis: 400px;
  background: #333;
  flex-shrink: 0;
}
@media (max-width: 600px){
  .wrapper{
    display: block;
  }
}

查看演示here

【讨论】：

Second 在低于之后需要保持 300px 高。只有第一个 div 应该保留以前的纵横比。
使用断点将固定高度设置为第二个 div 是否满足您的需求？
你错过了类名的点前缀，这就是样式没有生效的原因。检查这个分叉：jsfiddle.net/1pmhhjvn/2
这没有我的初始要求：wrapper: max-width: 1000px;最大高度：400px；，并且在第二个 div 低于后，第一个 div 仍然不保留纵横比。
很遗憾没有，但我希望它对某人有所帮助。