请在此处查看摘要https://jsfiddle.net/nc7edzck/
我想在点击时显示图像,无论屏幕大小如何,都应该填满屏幕而不会扭曲宽高比。
this.setState
我试过了所有的东西,但如果它在一个屏幕上工作,它会扭曲另一个不同屏幕大小的屏幕。
编辑:请在发布之前通过放大和缩小来尝试您的解决方案。此外,我们可以把黑色条带扔掉它没有必要。我可以稍后独立放置。
.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;
}

答案 0 :(得分: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);
});
答案 1 :(得分:0)
从.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%;
}