[英]How do i make image fill 90% screen without losing aspect ratio
請在這里查看代碼片段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>
看看這個小提琴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);
});
移除max-width: 90%;
從.img類中添加到.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%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.