Javascript 如何更改悬停时的图像

我正在尝试为用户设置一种方式，使其能够将鼠标悬停在图像的小预览上，并在“特色”部分显示该图像的全尺寸。我已经通过下面的代码实现了这一点

我的问题是，当图像的大小非常不同时（一幅风景画和一幅肖像画），它看起来非常糟糕，会使页面跳转

目标：我正试图找出一种避免这种情况的方法。我想找到一种方法，以统一的外观显示主图像。也就是相同的大小。我想做到这一点，而不通过改变图像的大小来严重扭曲图像。非常感谢您的帮助

查看JS小提琴：

HTML:

Jquery：

   $('#imageNum1').hover(function() {

    $('.small').removeClass('selectedImage')

   var src = $('#imageNum1').attr('src');
   $('#imageNum1').addClass('selectedImage')
   $('#mainPicture').attr('src', src);


  });

   $('#imageNum2').hover(function() {

    $('.small').removeClass('selectedImage')

   var src = $('#imageNum2').attr('src');
   $('#imageNum2').addClass('selectedImage')
   $('#mainPicture').attr('src', src);

   });

---

添加一个

max height

和

max width

会使效果更好

退房

或者可以将其封装在

div

中

<div class="container"><img src="img.jpg"></div>

退房

或

为了使图像具有固定大小，请始终使用

div

，并将其设置为背景，使其覆盖div：

---

查看我通过将

.small

中最大和最小宽度的

15%

更改为

15vw

实现了目标

.small{
    max-width: 15vw;
    max-height: 15%;
    min-width: 15vw!important;
    min-height: 15%!important;
}

vw

表示视口宽度，而

%

将采用内容大小，并根据内容大小进行调整。当图像更改时，由于图像大小的差异，该图像将增加内容宽度，这意味着使用

%

的任何内容都将更改为新宽度

---

到目前为止，我最好的尝试如下。这可以正常工作，但会扭曲非常高的图像。有人能提出改进建议吗

JSFiddle：

---

如果不希望图像影响文档中的其余元素，则需要将其从流中移除

如果为所选图像指定一个固定的位置，并使用变换属性，则可以执行此操作

话虽如此，这里有一个非常粗略的例子，说明我将如何做到这一点

响应示例（全屏打开并调整窗口大小）：

$（'#imageNum1'）。悬停（函数（）{
$（'.small'）.removeClass（'selectedImage'））
var src=$（'#imageNum1'）.attr（'src'）；
$（'#imageNum1'）.addClass（'selectedImage'））
$（'#main picture'）.attr（'src'，src）；
});
$（'#imageNum2'）。悬停（函数（）{
$（'.small'）.removeClass（'selectedImage'））
var src=$（'#imageNum2'）.attr（'src'）；
$（'#imageNum2'）.addClass（'selectedImage'））
$（'#main picture'）.attr（'src'，src）；
})；

正文{
职位：相对
}
.smallerImages{
宽度：20%；
}
#主要图片{
最大宽度：55vw；
最大高度：75vh；
保证金：0自动；
位置：固定；
最高：50%；
左：50%；
转换：转换（-50%，-50%）
}
.小{
宽度：100%；
保证金：.5em自动；
}

最可行的解决方案和“智能”是预编辑所有图像，例如在photoshop中（或至少在paint中）。然后以固定大小在容器（例如div）中显示所有图像……我个人认为通过编码解决该问题不是一个好的解决方案（关于图像编辑和渲染，而不是编码）@JasonKrs谢谢你的评论！问题是用户发布了图片。所以我现在无法控制编辑。好的。我更好地理解你的要求。Himanshu下面有一个很好的选项…我找到了一个库，它完全符合你的要求。。检查@JasonKrs的

filestack.js

已经尝试提供3个选项来帮助。我想第三个选项是uld可能对他有用是的，就我而言，你用选项3OP解决了这个问题，它试图使图像响应，第三个选项使用绝对值。

<div class="container"><img src="img.jpg"></div>

  .container{ 
        height: 100px; width: 200px; overflow: hidden; 
   }

.small{
    max-width: 15vw;
    max-height: 15%;
    min-width: 15vw!important;
    min-height: 15%!important;
}

.small{
    max-width: 10%;
    height: 100px;
    min-width: 10%!important;
}

.smallerImages{
margin: 0 auto;
}

#mainPicture{
width:  100%;
height: 600px;
display: table; margin: 0 auto;
}