我正在尝试调整我的灯箱大小。但是当我使用 max-width: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">×</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>
答案 0 :(得分: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%;
}
}