Javascript 当您将鼠标悬停在图像上时，图像会缩小，保持不变大小

我设法让我的照片滑块工作。现在它工作得很好，但当我让它试着让它变得压抑，这样它就可以随着窗口的大小而缩小，一切都出了问题。不是图像缩小，而是整个长方体缩小。我不知道如何让它与它自己的盒子缩小比例。在这件事上有任何帮助都会很好

var popup=$（'.popup'）；
popup.hover（函数（）{
$（this.toggleClass（'open'）；
});
.popup{
边缘底部：20px；
边界半径：5px；
溢出：隐藏；
盒影：0 2px 5px rgba（0,0,0,0.5）；
位置：相对位置；
-webkit过渡：所有0.5s；
过渡：均为0.5s；
边框样式：实心；
边框颜色：rgb（24416634）；
边框宽度：1px；
}
.popup.content{
宽度：40%；
身高：100%；
位置：绝对位置；
右图：-40%；
排名：0；
背景：白色；
过渡：均为0.5s；
}
.popup.wrapper{
宽度：100%；
身高：100%；
位置：相对位置；
填充：24px；
}
.popup.wrapper h2{
字体系列：“格鲁吉亚”，衬线；
字体：斜体；
字体大小：粗体；
字号：26px；
线高：32px；
利润率：8px 0 10px 20px；
不透明度：0；
过渡：均为0.2s；
过渡延迟：0.2s；
}
.popup.wrapper h4{
文本转换：大写；
颜色：#999；
字体大小：12px；
位置：相对位置；
顶部：4px；
不透明度：0；
过渡：均为0.2s；
过渡延迟：0.3s；
}
.popup.wrapper h4 span{
文本转换：无；
字体：斜体；
字体系列：“格鲁吉亚”，衬线；
}
.popup.wrapper.category{
背景：#333；
填充：7px 15px；
显示：内联块；
颜色：白色；
文本转换：大写；
字体大小：10px；
字母间距：1px；
字号：500；
位置：绝对位置；
顶部：-24px；
左：20px；
过渡：均为0.2s；
过渡延迟：0.5s；
}
.popup.wrapper.line{
宽度：50px；
高度：2倍；
不透明度：0；
背景：rgb（24416634）；
利润率：16px 0 14px；
过渡：均为0.2s；
过渡延迟：0.4s；
}
.popup.p{
字体大小：14px；
线高：24px；
不透明度：0；
过渡：均为0.2s；
过渡延迟：0.5s；
保证金：0；
}
.popup.p span{
文本转换：大写；
字体大小：0.75em；
字号：500；
字母间距：0.5px；
}
.popup.a包装器{
显示：块；
文本对齐：右对齐；
文字装饰：无；
字体：斜体；
字体大小：12px；
颜色：#999；
字体系列：“格鲁吉亚”，衬线；
边缘顶部：12px；
过渡：均为0.2s；
不透明度：0；
}
.popup.wrapper a i.fa{
过渡：均为0.2s；
左边距：2倍；
颜色：#E3000C；
}
.popup.wrapper a:悬停{
颜色：#E3000C；
}
.popup.wrapper a:悬停i.fa{
左边距：12px；
}
.popup.open.image容器{
宽度：60%；
}
.popup.open.content{
右：0；
}
.popup.open.content.category{
排名：0；
}
.popup.open.content h2{
不透明度：1；
左边距：0；
}
.popup.open.content h4{
排名：0；
不透明度：1；
}
.popup.open.content.line{
宽度：90px；
不透明度：1；
}
.popup.open.content p{
不透明度：1；
}
.popup.open.content a{
不透明度：1；
}
.扳机{
位置：绝对位置；
顶部：24px；
右：24px；
字体大小：14px；
文本转换：大写；
字母间距：1px；
文字装饰：无；
颜色：#333；
}
德里布先生{
文本对齐：居中；
显示：块；
边缘顶部：20px；
颜色：#fff；
}
.drib.fa{
颜色：#ea4c89；
}

文件夹
网页设计项目
“进入新的你”健康应用程序
帮助人们过上更健康生活的web应用程序。这是我大学最后一年的项目。使用AJAX、JQuery、MySQL等语言，允许用户注册并在站点上拥有自己的空间

网页设计项目
三维虚拟博物馆
该项目允许用户查看3D Max中创建的中世纪武器的3D模型，然后将其提取并上传到该网站。用户可以玩模型，改变它的颜色，大小等给网站
互动的感觉

删除这将解决您的问题，因此img将保持与背景相同：

.popup.open .image-container {
  width: 60%;
}


var popup=$（'.popup'）；
popup.hover（函数（）{
$（this.toggleClass（'open'）；
});
.popup{
边缘底部：20px；
边界半径：5px；
溢出：隐藏；
盒影：0 2px 5px rgba（0,0,0,0.5）；
位置：相对位置；
-webkit过渡：所有0.5s；
过渡：均为0.5s；
边框样式：实心；
边框颜色：rgb（24416634）；
边框宽度：1px；
}
.popup.content{
宽度：40%；
身高：100%；
位置：绝对位置；
右图：-40%；
排名：0；
背景：白色；
过渡：均为0.5s；
}
.popup.wrapper{
宽度：100%；
身高：100%；
位置：相对位置；
填充：24px；
}
.popup.wrapper h2{
字体系列：“格鲁吉亚”，衬线；
字体：斜体；
字体大小：粗体；
字号：26px；
线高：32px；
利润率：8px 0 10px 20px；
不透明度：0；
过渡：均为0.2s；
过渡延迟：0.2s；
}
.popup.wrapper h4{
文本转换：大写；
颜色：#999；
字体大小：12px；
位置：相对位置；
顶部：4px；
不透明度：0；
过渡：均为0.2s；
过渡延迟：0.3s；
}
.popup.wrapper h4 span{
文本转换：无；
字体：斜体；
字体系列：“格鲁吉亚”，衬线；
}
.popup.wrapper.category{
背景：#333；
填充：7px 15px；
显示：内联块；
颜色：白色；
文本转换：大写；
字体大小：10px；
字母间距：1px；
字号：500；
位置：绝对位置；
顶部：-24px；
左：20px；
过渡：均为0.2s；
过渡延迟：0.5s；
}
.popup.wrapper.line{
宽度：50px；
高度：2倍；
不透明度：0