Question

我正在尝试实现以下目标：水平栏由几张图片组成，例如300px宽度。

只要有足够的空间（视口>图片数*宽度*宽度），每张图片就具有其自然大小（并且始终是正确的宽高比），但是它们永远不会增长。

如果空间不足，图片将缩小直到最小宽度达到100px，然后滚动条就会滚动。

HTML：

<div class="flex-container">
  <img src="https://via.placeholder.com/300x300.png"/>
  <img src="https://via.placeholder.com/300x300.png"/>
  <img src="https://via.placeholder.com/300x300.png"/>
</div>

CSS：

.flex-container {
  display: flex;
  width: 100vw;
}

img {
  flex: 0 1 auto;
  width: 100%;
  min-width: 100px;
}

有关这种基本行为，请参见我的笔：https://codepen.io/urac/pen/eQXXMj（如果您不熟悉哈巴狗/手写笔，请使用代码面板中的下拉菜单查看编译的HTML / CSS）

当垂直空间太小时，我无法使用flexbox或grid都无法正常工作。图片应再次缩小，直到达到最小高度100px。

如果可能，我正在寻找纯CSS解决方案。用Java脚本计算尺寸是可能的，但由于内容是动态的，因此很模糊，因此事先不知道图片（或div）的数量或高度/宽度/长宽比。

要获得奖励积分：垂直版本。
我甚至更喜欢这个。（https://codepen.io/urac/pen/QJPPez）

[目标是在纵向视口的底部和横向视口的左侧具有一个不错的响应式菜单栏。不是这个问题的一部分，我的媒体查询工作正常。]

带有纯CSS动态内容的响应式菜单栏

0 个答案: