レスポンシブCSS：div too too

Question

ライトボックスのサイズを変更しようとしています。しかし、最大幅：100％を使用すると、画像が大きすぎて（img）、PCの画面が携帯電話（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%; 
    } 
}