如何在2个div之间放置响应式图像？

Question

我正在尝试放置this图像的所有内容，但我没有想法。

CSS

.home
{
    background: url("main_01.png");
    position: relative;
    width: 100%;
    height: 70%;
}
.loga
{
    position: relative;
    width: 100%;
    height: 30%;
    background: #f8f8f8;
}
.left
{
    background: url("mbp.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    height: auto;
    min-width: 800;
    min-height: 500;
    left: 50%;
    width: 50%;
}

HTML

<div class="bar"></div>
<div class="home">
    <div class="logo"><img src="logo.png"></div>
    <div class="menu">
        <ol>
            <li><a href="#"><span style="color: #98cb5d">> </span>Home </a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ol>
    </div>
    <div style="clear:both;"></div>
    <div class="right">
        <div class="media"><b>Media tools </b>deliveded simply</div>
        <div class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing    elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua Ut enim ad minim veniam, quis nostut labore et dolore rud exercitation ullamco laboris nisi dolore ip ex ea commodo consequat.</div>
        </br></br>
        <div class="button">DISCOVER RAISED</div>
        </br></br></br>
    </div>
    <div class="left"></div>
    <div class="loga">
    <div class="trusted">
        <b>Trusted by</b></br>major sales companies</b>
    </div>
    <div class="logoa"><img src="a.png"></div>
    <div class="logoafnic"><img src="afnic.png"></div>
    <div class="logonorth"><img src="north.png"></div>
    <div class="logounited"><img src="united.png"></div>
    <div style="clear: both;"></div>
    <div style="clear:both;"></div>

Answer 1

也许这会有所帮助。不确定我理解答案但是，它至少是一个开始。

＆＃13;

＆＃13;

.home{
display:flex; 
}

.left,.right{
  width:200px;
  height:150px;
  line-height:150px;
  text-align:center;
}

img {
  width:auto;
  max-width:350px;
  max-height:150px;
}

＆＃13;

<div class="home"> 
  <div class="left">
   left div fixed width
  </div>

  <img src="http://placehold.it/350x150">

  <div class="right">
    right div fixed width
  </div> 
</div> 

＆＃13;

＆＃13;

＆＃13;