要同时设置min-width和等比例缩放无滑动条,可以使用CSS中的flexbox布局来实现。

首先,将父容器设置为flex布局,然后将子容器设置为flex-grow: 1,这样子容器会自动填充父容器的剩余空间。

接下来,使用padding-top属性来设置子容器的高度,以保持宽高比。在这种情况下,需要知道宽高比例,然后通过计算得到padding-top的值。

最后,设置子容器的overflow属性为hidden,这样当内容超出容器宽高时,会自动隐藏并不显示滚动条。

以下是一个示例代码:

HTML:

<div class="container">
  <div class="content"></div>
</div>

CSS:

.container {
  display: flex;
  min-width: 400px;
}

.content {
  flex-grow: 1;
  padding-top: 75%; /* 设置宽高比例,例如4:3的宽高比为75% */
  overflow: hidden;
}

根据实际需求,将宽高比例替换为所需的比例值。这样设置后,即使在窗口缩小时,容器也会保持最小宽度,并且内容会按比例缩放而不会出现滚动条。

css既要设置min-width又要等比例缩放无滑动条怎么解决

原文地址: http://www.cveoy.top/t/topic/i4Bt 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录