Question

我试图为用户设置一种方法，让用户可以将鼠标悬停在图片的小预览上，并拥有一个＆＃34;特色＆＃34;部分以完整尺寸显示此图像。我已经设法通过以下代码实现了这一目标。

我的问题是当图像大小不同时（一个风景和一个肖像看起来非常糟糕并使页面跳跃。

目标：我试图想办法避免这种情况。我想找到一种以穿制服的外观显示主图像的方法。阿卡大小相同。我希望通过改变它们的大小来实现这一目标而不会严重扭曲图像。非常感谢任何帮助。

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

   });

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/

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

Answer 3

我通过将//last try at it function getProd(upc) { var rdoc; db.get(upc).then(function(result) { rdoc = result.data; console.log(rdoc) }); } // gprodno = rdoc.product; // gdesc = rdoc.proddesc; }); ------------------------------------------------------------- //PREVIOUS try at it function getProd(upc) { db.get(upc, (function(err, rdoc) { if (err) { return console.log(err); } gprodno = rdoc.product; gdesc = rdoc.proddesc; } ); }的最大和最小宽度15%更改为.small来完成目标。

15vw

.small{ max-width: 15vw; max-height: 15%; min-width: 15vw!important; min-height: 15%!important; }用于视口宽度，而vw将获取内容大小和相对于它的大小。当图像发生变化时，由于图像尺寸不同，该图像会增加内容宽度，这意味着使用%的任何内容都将更改为新的宽度。

Here's the JSFiddle.

Answer 4

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

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

如何在悬停时更改图像

4 个答案: