如何在移动视图中并排排列2张图片？

Question

图片已使用max-width和max-height响应，并且还有float : left。

使用display : inline-block不会将它们并排排列，而是排列在顶部和底部，但随着窗口尺寸的减小，图像会变小。

然而，

使用display : flex并排排列它们......但问题是当我减小窗口大小时图像不会变小并溢出。

这样做的正确方法是什么？我希望图像具有相对宽度和高度，并排排列（仅2个图像），因此它们将根据窗口/视口大小变小或变小。

这是我到目前为止的尝试：

HMTL

<div class='w3-container inline' style='position : relative; right : 10px;' >
 <img class='w3-round' style=' float : left; 
 position : relative; right : 50px; 
 max-width : 200px; max-height : 200px;' src='promo/PROMO PKET.png'/>
 </div>

CSS

.inline {
display : flex;
margin-top : 30px;
padding-right : 50px
}

aaannd他们看起来像这样：

查看图像是如何裁剪的，而不是正确调整大小...

Answer 1

为您的尺寸使用百分比，示例width: 50%; max-width: 50%而不是像素

Answer 2

您可以利用百分比来保持响应速度。我并不是真的推荐所有浮动内容，请使用display：inline-block;代替。

.container{text-align:center;}
.container img{display:inline-block;width:50%;}

这里的工作示例：https://jsfiddle.net/gx6toshr/4/