如何使圖像填充90％的屏幕不失寬高比

Question

請點擊這裏https://jsfiddle.net/nc7edzck/

查看片斷我想顯示上點擊一個圖像，它應該不考慮屏幕大小的填充屏幕，不扭曲長寬比。

.imgclick{ 
    position: fixed; 
    top: 50%;left: 50%; 
    transform: translate(-50%,-50%); 
    z-index: 100001; 
    max-height: 80%; 
} 

我嘗試了一切，但如果它在一個屏幕上工作，它會扭曲另一個不同屏幕尺寸的屏幕。

編輯：請在發佈之前通過放大和縮小來嘗試解決方案。而且，我們可以把黑條扔掉，沒有必要。我可以稍後單獨放置它。

var ImageTrigger = false; 
 
$(document).on('click', '.image', function() { 
 
    if (!ImageTrigger) { 
 
    var ImgSrc = $("img", this); 
 
    $("#imgFrame img").attr("src", ImgSrc.attr("src")); 
 
    $("#imgFrame img").attr("alt", ImgSrc.attr("alt")); 
 
    $("#imgFrame img").attr("title", ImgSrc.attr("alt")); 
 

 
    $("#imgFrame .imgclicktext").html(ImgSrc.attr("alt")); 
 

 

 
    $("#imgFrame").css('visibility', 'visible'); 
 
    ImageTrigger = true; 
 
    return false; 
 
    } 
 

 

 
}); 
 

 
$(document).on('click', 'body', function() { 
 
    if (ImageTrigger) { 
 

 
    $("#imgFrame").css('visibility', 'hidden'); 
 
    ImageTrigger = false; 
 
    } 
 
});

.imgclicktext { 
 
    padding: 3px 15px; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    color: white; 
 
    text-align: center; 
 
    margin-top: 15px; 
 
} 
 
img { 
 
    /*transition: 0.3s ease-in-out;*/ 
 
    max-width: 90%; 
 
    max-height: 400px; 
 
    /*! padding: 10px; */ 
 
} 
 
.imgclick { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 100001; 
 
    max-height: 80%; 
 
} 
 
#imgFrame { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 100000; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    visibility: hidden; 
 
    min-width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="imgFrame"> 
 
    <div class="imgclick"> 
 
    <img style="margin: 0 auto;display: table;" src="" alt="" title="" class=""> 
 
    <div class="imgclicktext" style=""></div> 
 
    </div> 
 
</div> 
 
<div class="image" data-content="Not so sweet but ok!"> 
 
    <img style="margin: 0px auto;display: table;" src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Howlsnow.jpg" alt="Not so sweet but ok!" title="Hottie"> 
 
</div>

Answer 1

從.IMG類刪除max-width: 90%;並添加同進.imgclick類。這應該做的伎倆，因爲我們想包含容器，而不是內部的圖像。

[編輯]

忽略這一點。與LegenJerry的調整大小一起回答。它是最好的解決方案。

正在通過CSS並試圖找到一個CSS技巧來解決這個想出了另一種解決方案。希望這可以幫助。更改你的提琴如下：

img{ 
/*transition: 0.3s ease-in-out;*/ 
max-width: 90%; 
max-height: 90%; 
/*! padding: 10px; */ 

} 


.imgclick{ 
position: fixed; 
top: 10%;left: 10%; 
z-index: 100001; 
max-height: 90%; 

} 

Answer 2

看看這個小提琴 https://jsfiddle.net/nc7edzck/4/

我增加了一個窗口大小調整和改變了CSS的：

var height = $('.image').height()*.9; 
    var width = $('.image').width()*.9; 

    $('#imgFrame img').css('height',height); 
    $('#imgFrame img').css('width',width); 

    $("#imgFrame").css('visibility', 'visible'); 

    $(window).resize(function(){ 
     height = $('.image').height()*.9; 
     width = $('.image').width()*.9; 
     $('#imgFrame img').css('height',height); 
     $('#imgFrame img').css('width',width); 
    });