<div style="display: flex;width: 1000px;height: 200px;background: green;">
  <img
    src="https://www.baidu.com/img/bd_logo1.png?qua=high&where=super"
    style="max-width: 100%;height: 100%; margin: 0  auto;"
  />
</div>

图片尺寸自适应,参考:

由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.

这里建议使用 object-fit 来处理,类似 iOS 中图片的 contentMode

下面摘自: https://www.cnblogs.com/soyxiaobi/p/9640729.html

属性 描述
fill 默认值。整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。
contain 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
cover 被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。
none 内容尺寸不会被改变。
scale-down 内容的尺寸就像是指定了 none 或 contain,默认应用尺寸最小的值