如何更改懸停上的圖像

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>