Question

我有四个div，要根据屏幕宽度进行放大和折叠。最小宽度应为320px，因为我正在使用CSS网格，并且想一次在移动屏幕上渲染一个div。但是，随着屏幕尺寸的增加，我希望div扩大，但保持相同的宽高比。我在Stackoverflow上查看了其他一些类似的问题，但这些问题与我想要实现的目标无关。任何帮助将非常感激。

:=

.inner-tile {
  display: grid;
  max-width: calc(320px * 4 + 20px * 3);
  margin: auto;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  justify-items: center;
  width: 100%;
  height: auto;
  font-size: 18px;
  padding-bottom: 10px;
}

.event {
  -webkit-box-shadow: 4px 4px #e3e3e3;
  /*border: 1px solid grey;*/
  border-radius: 5px;
  min-width: 320px;
  min-height: 250px;
  width: 90%;
  height: auto;
  transition: all 1s ease-out;
}

.event-image {
  background: url('club.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-width: 320px;
  min-height: 250px;
  width: 100%;
  height: 80%;
  margin-bottom: 5px;
  border-radius: 4px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

Answer 1

如果要使任何元素相对于屏幕宽度而不是容器宽度，请使用vw单位，它代表视图宽度。这也可以解决position: absolute。

.inner-tile {
    width: 25vw;
    //...
}

Answer 2

您可以以此为基础来保持div的比例

.ratio {
  position:relative;
  width: 50%;
  background: #ddd;
}

.ratio::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%; /* ratio 16/9 */
}

.ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="ratio">
  <div class="ratio-content">
    content content content content content content content content content content content content content content content content content content
  </div>
</div>

div宽度和高度与屏幕宽度成比例

2 个答案: