(отзывчивый) Относительный 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 являются абсолютными, так и может плавать их вправо или влево ..

Предпочтительнее и может решить эту проблему с медиа-запросом для небольшого экрана (ex mobile, tab), устанавливающего верхнюю, нижнюю или левую, правую абсолютную позицию

Answer 2

Попробуйте

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

Отрегулируйте значение высоты Vh от ваших потребностей. Он масштабирует размер img на основе родительской ширины