如何基于宽度设置元素最大高度（限制最大宽高比）

要实现你要求的「当元素高度超过宽度时限制高度为宽度，否则保持内容高度」的效果，可以通过CSS容器查询单位结合max-height属性完成，无需JavaScript：

核心CSS代码 #

.container {
  width: 50%;
  /* 开启容器查询，让子元素能使用容器宽度单位 */
  container-type: inline-size;
}

.element {
  background: #ccc;
  margin-top: 10px;
  /* 最大高度等于自身宽度（100cqw代表容器宽度的100%，即元素自身宽度） */
  max-height: 100cqw;
  /* 超出部分滚动显示（也可改为hidden直接裁剪） */
  overflow: auto;
}

效果说明 #

• 当元素内容高度小于自身宽度时，元素高度自适应内容，不会强制拉伸到1:1比例；
• 当元素内容高度超过自身宽度时，高度被限制为宽度，超出内容通过滚动条显示（或被裁剪，取决于overflow属性）。

完整代码示例 #

<div class="container">
  <div class="element">This element should not change</div>
  <div class="element">This div height should be cut because aspect ratio is bigger than 1/1

<small>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lectus eu nulla consequat malesuada at vitae eros. Nulla facilisi. Donec purus nulla, egestas vitae molestie vel, pellentesque condimentum turpis. Quisque ullamcorper tincidunt velit vel pharetra. Maecenas et massa bibendum, tincidunt mauris at, pulvinar mi. Curabitur ut porta sem, in dapibus justo. Phasellus vitae consequat erat. Aenean non facilisis eros.

  Aenean placerat urna sit amet libero viverra congue. Maecenas interdum nunc quam. Nam placerat massa fermentum urna aliquam, eu consequat nunc sollicitudin. Etiam elementum sapien ac orci bibendum efficitur. Cras congue enim sit amet sollicitudin ultrices. Duis convallis mi felis. Nulla a ipsum tempor, eleifend tellus scelerisque, bibendum neque. Nulla erat elit, bibendum vitae commodo eu, finibus eget nibh. Phasellus non dictum lectus. Quisque at eros nibh. Cras fermentum, ex eu eleifend placerat, arcu justo sodales tellus, et cursus mi mauris ac ante. Aliquam vel arcu mi. Duis condimentum nisi orci, id interdum lectus suscipit eu.

  Phasellus eu laoreet sem. Cras nec placerat sapien. Aliquam eget efficitur libero. Etiam velit velit, interdum in turpis eget, tincidunt sagittis neque. Pellentesque a feugiat risus. Donec sagittis odio libero, eu tristique ipsum hendrerit quis. Vestibulum porttitor eros erat, vitae accumsan magna ultricies vel. Vestibulum laoreet augue eu quam dictum maximus. Aliquam erat volutpat. Fusce accumsan mollis cursus. Sed et ligula tellus. Donec faucibus justo id fermentum sodales.

  Donec non sapien et turpis dignissim hendrerit. Nam eget ultrices est. Integer lacinia bibendum tortor, eget vestibulum eros lacinia sit amet. Vivamus non nisl feugiat, mattis mi ut, ultricies leo. In blandit fermentum nisi, ut sagittis neque congue id. Duis quis elementum metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec lectus nisi, ultricies euismod metus in, tempor vulputate velit. Proin pellentesque auctor magna eleifend fermentum. Proin rhoncus augue eu hendrerit accumsan.

  Aliquam ac elit suscipit, dignissim sem quis, lobortis tellus. Nunc justo nulla, vulputate et blandit a, luctus eu lorem. Etiam et turpis sit amet ante tempus dictum eget iaculis sem. Mauris augue est, laoreet sit amet euismod a, posuere in lorem. Morbi ut dapibus odio. Morbi tincidunt, magna ac cursus dapibus, arcu dui volutpat libero, sit amet fermentum tellus arcu quis tellus. Proin vitae tortor risus. Nunc sed congue sapien. Fusce luctus, metus euismod bibendum rutrum, metus ipsum semper sem, at dictum ante diam a mauris. Sed commodo posuere enim. Etiam scelerisque bibendum orci in ornare. Phasellus sit amet nulla nulla. Fusce ut erat mi.</small>
  </div>
</div>

内容的提问来源于stack exchange，提问作者ZecKa