Получение двух изображений, которые бок о бок уменьшаются и увеличиваются по мере изменения страниц

Question

У меня есть два div, которые сидят бок о бок и содержат изображения в них. Когда веб-страница представляет собой размер моего 13-дюймового экрана Macbook, фотографии прекрасно сидят бок о бок. Однако, когда я начинаю увеличивать ширину экрана, фотографии начинают разбрасываться, оставляя промежуток между ними.

Как получить обе фотографии, чтобы оставаться рядом друг с другом, даже когда страница браузера увеличивается или уменьшается? `

.pic { 
 
    max-width: 100%; 
 
} 
 

 
#pic2 { 
 
    max-width: 100%; 
 
} 
 

 
.photosection { 
 
    background-color: black; 
 
    max-width:1400; 
 
    height:363px; 
 
} 
 

 
#photosection1 { 
 
    float:left; 
 
    max-width: 110vw; 
 
} 
 

 
#photosection2 { 
 
    max-width:50%; 
 
    float:right; 
 
}

<div class="photosection"> 
 
    <div id="photosection1"> 
 
    <a href="#" class=""> 
 
     <span class="text"> 
 
     Treat Yourself 
 
     Intuitive Language Coaching 
 
     (Intuitive Life-Coaching + Communication Training) 
 
     </span> 
 
     <img class="pic" src="images/oneonone.jpg" alt="inspiremug"> 
 
    </a> 
 
    </div> 
 

 
    <div id="photosection2"> 
 
    <a href="" class=""> 
 
     <span class="text"> 
 
     Treat Your Group, Business or Organization 
 
     I'll bring the sweets! 
 
     </span> 
 
     <img id="pic2" src="images/groupsession.jpg" alt="necklace"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

#photosection1 { 
    width: 50%; 
    float: left 
} 

#photosection2 { 
    width: 50%; 
    float: right 
} 

ширина добавить = «100%» для вашего изображения тега

<img class="pic" src="images/oneonone.jpg" alt="inspiremug" width="100%"> 
<img id="pic2" src="images/groupsession.jpg" alt="necklace" width="100%"> 

Answer 2

вы ищете это ..?

.pic { 
 
max-width: 100%; 
 
    } 
 

 
    #pic2 { 
 
max-width: 100%; 
 
} 
 

 
    .photosection { 
 
    background-color: black; 
 
    max-width:1400; 
 
    height:363px; 
 
     } 
 

 
#photosection1 { 
 
float:left; 
 
max-width: 50%; 
 
    } 
 

 
    #photosection2 { 
 
    max-width:50%; 
 
    float:right; 
 
     }

<div class="photosection"> 
 

 

 
      <div id="photosection1"> 
 
      <a href="#" class="" > 
 
      <span class="text"> 
 
       Treat Yourself 
 
      Intuitive Language Coaching 
 
      (Intuitive Life-Coaching + Communication Training) 
 
       </span> 
 

 
      <img class="pic" src="http://ias.kgisl.com/wp-content/uploads/2016/01/APJ-Abdul-Kalam.jpg" alt="inspiremug"> 
 
      </a> 
 

 
     </div> 
 

 
     <div id="photosection2"> 
 
      <a href="" class="" > 
 
      <span class="text"> 
 
       Treat Your Group, Business or Organization 
 
       I'll bring the sweets! 
 
       </span> 
 

 

 
      <img id="pic2" src="http://ias.kgisl.com/wp-content/uploads/2016/01/APJ-Abdul-Kalam.jpg" alt="necklace"> 
 
      </a> 
 
     </div> 
 

 
    </div>

Answer 3

Просто использовать дисплей: встроенный блок-свойство для дивы и размера изображения на ширину: 100%.

.pic { 
width: 100%; 
    } 

    #pic2 { 
width: 100%; 
} 

    .photosection { 
    background-color: black; 
    max-width:1400; 
    height:363px; 
     } 

#photosection1 { 
    display: inline-block; 
float:left; 
max-width: 50%; 
    } 

    #photosection2 { 
     display: inline-block; 
    max-width:50%; 
    float:right; 
     } 

Помогает ли это?