在较小的父div中按比例缩小具有不同宽度的图像

Question

我正在尝试使用图像作为消息来重新创建聊天。图片的宽度不同，并且位于父div中，固定宽度为500px。但是，这些图片大于500像素，这意味着如果我使用“最大宽度：80％”将其缩小，则它们的确会缩小，但全部缩小到相同的宽度。在缩小时如何保持不同的宽度？我可以用flexbox实现吗？还是用桌子？

编辑：大致如下：

以下是情况摘要：

.wrapper {
  margin: 0 auto;
  margin-top: 20px;
  width: 500px;
}
.chat {
  border: 2px solid #b7b7b7;
}
.chat .chat-header {
  width: 496px;
  margin-bottom: -2.5px;
  position: relative;
}
.chat .chat-history {
  padding: 2%;
  overflow-y: scroll;
  height: 700px;
  overflow-x: hidden;
}
.message {
  max-width: 80%;
  height: auto;
  padding: 2px;
}
.float-right {
  float: right;
}

<div class="wrapper">
  <div class="chat">
      <div class="chat-header">
        <img class="chat-header" src="https://via.placeholder.com/1280x212"/>
      </div>
    <div class="chat-history">

      <div class="test">
        <img class="message float-right" src="https://via.placeholder.com/736x143" width="736" height="143" />
      </div>
        <div class="test">
          <img class="message" src="https://via.placeholder.com/530x384" width="530" height="384"/>
        </div>
      <div class="test">
        <img class="message float-right" src="https://via.placeholder.com/591x140" width="591" height="140" />
      </div>

      <div class="test">
        <img class="message" src="https://via.placeholder.com/546x152" width="546" height="152" />
      </div>

      <div class="test">
        <img class="message float-right" src="https://via.placeholder.com/561x101" width="561" height="101" />
      </div>
      <div>
        <img class="message float-right" src="https://via.placeholder.com/698x124" width="698" height="124" />
      </div>

      <div>
        <img class="message" src="https://via.placeholder.com/840x203" width="840" height="203" />
      </div>
      <div>
        <img class="message" src="https://via.placeholder.com/824x141" width="824" height="141" />
      </div>
      <div>
        <img class="message" src="https://via.placeholder.com/770x141" width="770" height="141" />
      </div>

      <div>
        <img class="message float-right" src="https://via.placeholder.com/748x139" width="748" height="139" />
      </div>
      <div>
        <img class="message float-right" src="https://via.placeholder.com/725x85" width="725" height="85" />
      </div>

      <div>
        <img class="message" src="https://via.placeholder.com/812x197" width="812" height="197" />
      </div>
      <div>
        <img class="message" src="https://via.placeholder.com/859x189" width="859" height="189" />
      </div>

      <div>
        <img class="message float-right" src="https://via.placeholder.com/740x140" width="740" height="140" />
      </div>
      <div>
        <img class="message float-right" src="https://via.placeholder.com/596x125" width="596" height="125" />
      </div>

      <div>
        <img class="message" src="https://via.placeholder.com/857x109" width="857" height="109" />
      </div>
      
    </div>
  </div>
</div>

Answer 1

使用具有不同:nth-child(expr)的多个max-width预设。 expr应该是n的一些公式，以便您获得重复的图像缩放模式或某些看起来随机的模式。

示例：

.message-container:nth-child(2n) .message {
  max-width: 60%;
}

.message-container:nth-child(2n+1) .message {
  max-width: 50%;
}

.message-container:nth-child(3n+2) .message {
  max-width: 40%;
}

将message-container类设置为chat-history内的div或改用.chat-history > div。

https://developer.mozilla.org/ru/docs/Web/CSS/:nth-child