Javascript 转盘与图像大小相同

我试图创建一个画廊，当点击一个图像时，它会弹出一个旋转木马

我就快到了，但是图像在全尺寸时是巨大的，所以我需要它变小，但是它在旋转木马上留下了背景

函数openModal（）{
document.getElementById（“myModal”）.style.display=“block”；
}
函数closeModal（）{
document.getElementById（“myModal”）.style.display=“无”；
}
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
var captionText=document.getElementById（“caption”）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i

正文{
字体系列：Verdana，无衬线；
保证金：0；
}
* {
框大小：边框框；
}
.row>列{
填充：0 8px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.栏目{
浮动：左；
宽度：25%；
背景色：黑色；
}
/*模态（背景）*/
.莫代尔{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：自动；
身高：100%；
溢出：自动；
背景色：黑色；
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：红色；
保证金：自动；
填充：0；
宽度：自动；
}
/*关闭按钮*/
.结束{
颜色：白色；
位置：绝对位置；
顶部：10px；
右：25px；
字体大小：35px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#999；
文字装饰：无；
光标：指针；
}
迈斯利德斯先生{
显示：无；
}
.光标{
光标：指针；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-50px；
颜色：白色；
字体大小：粗体；
字体大小：20px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
-webkit用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
img{
保证金底部：-4px；
}
.标题容器{
文本对齐：居中；
背景色：黑色；
填充：2x16px；
颜色：白色；
}
.演示{
不透明度：0.6；
}
.主动，
.演示：悬停{
不透明度：1；
}
悬停阴影{
过渡：0.3s；
}
.悬停阴影：悬停{
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}

灯箱
&时代；
1/4
2/4
3/4
4/4
❮
❯

将此添加到CSS样式中：

.modal content.mySlides img{
显示：块；
保证金：自动；
}

将此添加到CSS样式中：

.modal content.mySlides img{
显示：块；
保证金：自动；
}

为什么您不能使用bootstrap carousel？@RayeesAC不是每个人都使用bootstrap，如果只为一个功能加载整个bootstrap，那就有点傻了。把注意力放在这段代码中的实际问题上。你想把大图放在左右箭头之间吗？就像左边距上的左箭头、右边距上的右箭头和中间图像一样？我希望箭头之间的图像以及容器适合图像大小，这样就没有额外的空间（红色）了。@gpl原始代码段的问题是，您的头中有javascript，并且没有使用onload回调。下次只需单击“复制代码片段以回答”按钮，而不是重写整个内容。为什么您不能使用bootstrap carousel？@RayeesAC不是每个人都使用bootstrap，并且只为一个功能加载整个bootstrap会有点傻。把注意力放在这段代码中的实际问题上。你想把大图放在左右箭头之间吗？就像左边距上的左箭头、右边距上的右箭头和中间图像一样？我希望箭头之间的图像以及容器适合图像大小，这样就没有额外的空间（红色）了。@gpl原始代码段的问题是，您的头中有javascript，并且没有使用onload回调。下次只需单击“复制代码段以回答”按钮，而不是重写整个内容。如果发布代码段，至少要确保它工作正常，请单击第二个按钮上的“运行代码段”，然后亲自查看！（显示错误消息）是，它正在工作。首先读问题。我已经在Jackawan提供的代码中添加了新的CSS规则。这个Javascript错误是由他的代码生成的。但这个错误不是他的问题。问题是在箭头按钮之间放置幻灯片图像。我不知道为什么我因为给出正确答案而被否决。他也没有回应。我甚至问他是否试过。不管错误是否是问题所在。发布带有错误的代码片段是很难看的。另外，原始OP的代码段没有显示相同的错误，因此这是因为您将某些内容更改为iti，并使用实际图像更新了OP的代码段。在styleshe的底部添加此css