Отзывчивый CSS: div слишком большой

Question

Я пытаюсь изменить размер моего лайтбокса. Но когда я использую max-width: 100% изображения слишком большие (img) для экрана компьютера, слишком маленького для мобильных телефонов (img). И наоборот: max-width: 50%; (img1 и img2). Что мне делать?

CSS:

/* The Modal (background) */ 
#galeria .modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    padding-top: 100px; /* Location of the box */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */ 
} 

/* Modal Content */ 
#galeria .modal-content { 
    margin: auto; 
    padding: 20px; 
    max-width: 50%; 

} 

HTML:

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 

    <div class="close-button"><span class="close" id="close-sync">&times;</span></div> 
    <div id="sync1" class="owl-carousel"> 
    <div class="item"> 
      <img src="assets/img/eventos/16-12-2016/01.JPG"> 
     </div> 
    <div class="item"> 
      <img src="assets/img/eventos/16-12-2016/02.JPG"> 
     </div> 
    </div> 

    <div id="sync2" class="owl-carousel"> 
     <div class="item"> 
      <img src="assets/img/eventos/16-12-2016/01.JPG"> 
     </div> 
    </div> 

    </div> 

</div> 

Answer 1

Вы можете попробовать media queries:

#galeria .modal-content { 
    margin: auto; 
    padding: 20px; 
} 
/* phone screen width */ 
@media screen and (max-width: 600px) { 
    #galeria .modal-content { 
     max-width: 100%; 
    } 
} 
/* greater than phone width */ 
@media screen and (min-width: 601px) { 
    #galeria .modal-content { 
     max-width: 50%; 
    } 
}