如何在悬停时更改图像答案

【问题标题】：How to Change Image on hover如何在悬停时更改图像
【发布时间】：2017-08-03 23:26:52
【问题描述】：

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

我的问题是当图像的尺寸非常不同时（一张横向和一张纵向看起来很糟糕，并且会导致页面跳转。

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

查看 JS 小提琴：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);

   });

【问题讨论】：

最可行和“智能”的解决方案是预先编辑所有图像，例如在 Photoshop 中（或至少绘画）。然后，您将所有内容显示在具有固定大小的容器（例如 div）中......我个人认为通过编码解决该问题不是一个好的解决方案（它是关于图像编辑和渲染而不是编码）跨度>
@JasonKrs 感谢您的评论！问题是用户发布图像。所以我无法控制之前的编辑。
好的。我现在更了解您的要求
Himanshu 在下面有一个不错的选择...我找到了一个完全符合您要求的库。在filestack.com/docs/image-transformations/resize 上查看filestack.js

标签： javascript jquery html css hover

【解决方案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/

【讨论】：

@JasonKrs 已尝试提供 3 个选项来提供帮助。我猜第三个可能对他有用
是的，就我而言，你用选项 3 搞定了
OP 试图让图像响应，第三个选项使用绝对值。

【解决方案2】：

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

如果您为所选图像指定fixed 位置并使用transform 属性，这是可能的。

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

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

$('#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);

});

body {
  position: relative
}

.smallerImages {
  width: 20%;
}

#mainPicture {
  max-width: 55vw;
  max-height: 75vh;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.small {
  width: 100%;
  margin: .5em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

【讨论】：

【解决方案3】：

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

JSFiddle：https://jsfiddle.net/4hrvxpe2/26/

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

.smallerImages{
margin: 0 auto;
}

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

【讨论】：

【解决方案4】：

我通过将.small 中最大和最小宽度的15% 更改为15vw 来实现目标。

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

vw 用于视口宽度，而% 将采用内容大小并相对于该大小调整大小。当图像发生变化时，由于图像大小的差异，该图像会增加内容宽度，这意味着使用% 的任何内容都会更改为新的宽度。

Here's the JSFiddle.

【讨论】：