如何在一个网页上为模态图像定义不同的尺寸？ [英] How do I define different sizes for modal images on one webpage?
问题描述
我在w3schools找到的代码非常适合使用模态图像从缩略图生成全尺寸图像，除了在我的情况下我有一些非常宽的全景图在模态中使用相同的宽度或高度定义无法正确显示这适用于其他更标准尺寸的图像。在下面的代码中，高度设置为70％，但这不允许显示全景的完整水平尺寸。我不希望高度变小，因为它使常规尺寸的图像太小。有谁知道如何创建第二个不同的全景图定义，以不同的屏幕高度或宽度比例打开？谢谢。
I found code at w3schools that works really well for generating full size images from thumbnails using modal images, except that in my case I have some really wide panoramas that don't display properly using the same width or height definition in the modal that works well for the rest of the more standard size images. In the code below the height is set for 70% but this does not allow the full horizontal dimension of the panorama to display. I don't want the height to be any smaller as it makes the regular sized images too small. Does anyone know how I can create a second, different definition for the panoramas to open with a different ratio for screen height or width? Thank you.
<!DOCTYPE HTML>
<html>
<head>
<style>
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
vertical-align: middle;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
height: 70%;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
font-family: "europa",sans-serif;
font-size: 120%;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
html {
background-color: white;
}
body {
width: auto;
margin: 0 auto 0;
}
.gallery {
width: auto;
height: auto;
display: flex;
padding: 50px;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.photo {
padding: 20px;
}
.photo img {
padding: 30px;
}
</style>
</head>
<body>
<section class="gallery">
<div><img class="myImg" src="http://bartonlewisfilm.com/img_157-229_tb.jpg" alt="157-229, 96th St., IND Eighth Ave. Line" width="187" height="142" /></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<div><img class="myImg" src="http://bartonlewisfilm.com/img_214-099_368.jpg" alt="214-069, 182nd – 183rd Sts., IND Concourse Line" width="519" height="142" /></div>
<div><img class="myImg" src="http://bartonlewisfilm.com/img_214-015.jpg" alt="214-015, 182nd-183rd Sts., IND Concourse Line" width="199" height="142" /></div>
</section>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modal = document.getElementById('myModal');
var imageArray = document.getElementsByClassName("myImg");
for(var i=0;i<imageArray.length;i++){
var img = imageArray[i];
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};
</script>
</body>
</html>
我尝试过：
我尝试通过查看类在css和js中为更广泛的（全景）图像相互交叉引用的方式来创建第二个定义的类，但是没有成功获取它可以工作。
What I have tried:
I tried to create a class for the 2nd definition by looking at the way the classes were cross-referencing each other in css and js for the wider (panorama) images, but was unsuccessful in getting it to work.
推荐答案
如果你只想缩小图像以适应可用空间：
If you just want the image to shrink to fit in the available space:
.modal-content
{
display: block;
margin: auto;
max-width: 100%;
height: auto !important;
}
否则，你可能想要使用对象适合 [ ^ ];但是如果你需要支持IE，你需要 polyfill [ ^ ]。
Otherwise, you might want to play around with object-fit[^]; but if you need to support IE, you'll need the polyfill[^].
这篇关于如何在一个网页上为模态图像定义不同的尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
