请问如何CSS如何让Img标签里的图片随屏幕变化而变化，且同一行的图片对齐？

问题遇到的现象和发生背景 ：

模仿华为官网的过程中发现推荐信息的模块图片的自适应和对齐解决不了

我的解答思路和尝试过的方法 ：

HTML:用div标签包裹img标签,a标签，用img标签插入图片

        <div class="recommendation1">
            <a href="#">
                <img src="upload/recommendation1.jpg" alt="">
            </a>
        </div>

CSS:图片转化成inline-block,给外层的div设置magin值（做出华为官网的效果），div的宽高用百分数表示，img,a的宽高继承div的100%。

/*左图*/
.recommendation1 {
    left: 0;
    top: 0;
    display: inline-block;
    width: 63%;
    height: auto;
    margin-right: 30px;
    margin-bottom: 30px;
}
/*右图*/
.recommendation2 {
    right: 0;
    top: 0;
    display: inline-block;
    width: 33%;
    height: auto;
    margin-bottom: 30px;
}
.recommendation a {
    width: 100%;
    height: 100%;
}
.recommendation a img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

但因为margin是固定的30px，屏幕变化的过程中图片占的百分比变化，到一定程度会挤到下一排,而且图片无法对齐。

我想要达到的结果：

让Img标签里的图片随屏幕变化而变化，且同一行的图片对齐