javascript - 如何更改悬停时的图像

Question

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

我的问题是当图像尺寸非常不同时(一张横向和一张纵向)它看起来很糟糕并且使页面跳转。

目标:我正在尝试找出一种方法来避免这种情况。我想找到一种方法以统一的外观显示主图像。又名相同尺寸。我想在不通过改变图像大小而严重扭曲图像的情况下实现这一目标。非常感谢任何帮助。

查看 JS fiddle :https://jsfiddle.net/4hrvxpe2/10/

HTML:

<img  id='mainPicture' class="image-resposive" src= "https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
<br>
<br>

<div class='smallerImages'>

     <img id='imageNum1' class="small" src="http://i.huffpost.com/gen/4393678/images/o-THE-MATRIX-facebook.jpg">

     <img id='imageNum2' class="small" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">

 </div>

CSS:

.smallerImages{
display:inline-block;
}

#mainPicture{
width: 75%;
height: 75%;
display: table; margin: 0 auto;
}

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

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);

   });

Answer 1

添加 max-height 和 max-width 可以让效果更好。

查看https://jsfiddle.net/4hrvxpe2/13/

或者您可以将其封装在 div 中。类似的东西

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

并指定容器的尺寸，如下所示:

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

查看https://jsfiddle.net/4hrvxpe2/22/

或者

为了使图像采用固定大小，请始终使用 div 并将其设置为背景并使其覆盖 div:

查看https://jsfiddle.net/4hrvxpe2/23/