[英]How do i make image fill 90% screen without losing aspect ratio
Kindly view the snippet here https://jsfiddle.net/nc7edzck/ 请在这里查看代码片段https://jsfiddle.net/nc7edzck/
I want to display a image on click and it should fill screen irrespective of the screen size without distorting the aspect ratio. 我想在单击时显示图像,并且无论屏幕大小如何,它都应填满屏幕而不会扭曲宽高比。
.imgclick{
position: fixed;
top: 50%;left: 50%;
transform: translate(-50%,-50%);
z-index: 100001;
max-height: 80%;
}
I tried everything but if it works on one screen it distorts for another screen of different screen size. 我尝试了所有方法,但如果它在一个屏幕上可以工作,则会因另一屏幕尺寸不同的屏幕而失真。
EDIT: Please try your solution by zooming in and out before posting. 编辑:发布前,请通过放大和缩小尝试您的解决方案。 Also, we can throw the black strip out its not necessary. 此外,我们可以将黑色条带不必要地扔掉。 I can place it later independently. 我可以稍后将其独立放置。
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>
Check out this fiddle https://jsfiddle.net/nc7edzck/4/ 看看这个小提琴https://jsfiddle.net/nc7edzck/4/
I added a window resize and changed a bit of css: 我添加了一个窗口调整大小并更改了一些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);
});
Remove max-width: 90%;
移除max-width: 90%;
from the .img class and add the same into the .imgclick class. 从.img类中添加到.imgclick类中。 That should do the trick as we want to contain the container instead of the image inside. 这应该可以解决问题,因为我们要包含容器而不是内部的图像。
[Edit] [编辑]
Ignore this. 忽略这个。 Go with LegenJerry's answer with the resize. 调整大小与LegenJerry的答案保持一致。 Its the best solution. 这是最好的解决方案。
Was going through the css and trying to find a css trick to fix this came up with another solution. 经历了css并试图找到一个css技巧来解决此问题,这是另一个解决方案。 Hope this helps. 希望这可以帮助。 Change the following in your fiddle: 在您的小提琴中更改以下内容:
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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.