如何更改悬停上的图像

Question

我正在尝试设置一种方法，让用户能够将鼠标悬停在图像的小预览上并使“特色”部分以全尺寸显示此图像。我已经设法用下面的代码来完成这个工作。

我的问题是，当图像是非常不同的尺寸（一个景观，一个是纵向它看起来非常糟糕，使得页面跳转

目标：我试图想出一个办法来避免这种情况。我想找到一种方式来显示在统一的外观的主要形象。也就是相同的大小，我想要完成这个没有严重扭曲的图像，通过改变其大小。小提琴：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

我最好的尝试到目前为止如下。这工作正常，但它确实扭曲了非常高的图像。任何人都可以改进？

的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; 
} 

Answer 2

添加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 3

我在.small改变最大和最小宽度的15%到15vw完成的目标。

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

vw为视口宽度，而%将它相对于所述内容的大小和尺寸。当图像发生变化时，由于图像大小的差异，该图像会增加内容宽度，这意味着使用%的任何内容都将变为新的宽度。

Here's the JSFiddle.

Answer 4

如果你不希望图像影响文档中，你需要把它们从流的其余元素。

如果你给选定的图像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>