(响应式)相对DIV包含绝对左右图像

Question

我正在尝试制作一个完整的宽度标头，其中包含两个图像向左和右侧，屏幕尺寸为屏幕尺寸，但是当右图像与左侧相撞时，我希望左图尺寸缩小。谁能朝着正确方向推动我？

html

<div class="header">
<img src="images/header1.jpg">
    <div class="menu">
    <ul>
            <li><a href="index.html">Home  </a></li>
            <li>&#160; | &#160;</li>
            <li><a href="about.html"><strong>About  </strong></a></li>
            <li>&#160; | &#160;</li>
            <li><a href="blog">Blog  </a></li>
            <li>&#160; | &#160;</li>
            <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
<img src="images/header2.jpg">
</div>

CSS

.header {
    padding: 0px;
    margin: 0px;
    left: 0;
    background-color: #eac7f1; 
    position: relative;
    width: 100%;
    height: 165px;
    background-repeat: no-repeat;
    overflow: auto;
    z-index: 1;
}
.header img {
     position: absolute;
    bottom: 0;
}
.header img:nth-of-type(1) {
    left: 0;
    z-index: 3;
}
.header img:nth-of-type(2) {
    right: 0;
    z-index: 2; 
}

Answer 1

根据您提到的CSS，两个IMG都是绝对的

最好的u可以使用媒体查询来解决此问题的小屏幕（EX Mobile，Tab）设置顶部，底部或左，右右位置

Answer 2

尝试此

.header > img{
position: relative;
width: 20%;
height: auto;
}

根据您的需求调整高度VH值。它根据父宽度