[英]CSS transform scale fit to window size
I have tried lot, but didn't get any proper solution.我尝试了很多,但没有得到任何适当的解决方案。
Here is my code:这是我的代码:
$(function() { $(".zoom-close").on("click", function() { $(".zoom-close").toggleClass("transform", 1000); $(".img").toggleClass("active", 1000); }); });
body { background: red; width: 100%; margin: 0; } .col { width: 30%; } .img { display: block; transition: all 0.5s ease; position: relative; transition: all 0.5s ease; -webkit-transition: 1s } .img img { width: 100%; } .img.active { position: absolute; left: 0; top: 0; transform: scale(2.5); -webkit-transform-origin: top left; transition: all 0.5s ease; } .img.active img { transition: all 0.5s ease; } .zoom-close { position: absolute; right: 10px; bottom: 10px; background: #eee; border: 0; width: 32px; height: 32px; padding: 8px 8px 15px; cursor: pointer; outline: 0; border-radius: 0; transition: all 0.5s ease; } .zoom-close.transform { border-radius: 100%; transition: all 0.5s ease; z-index: 10; background: #fff; position: absolute; right: 5px; top: 18px; } .zoom-close.transform .zoom-inner { opacity: 0; transition: all 0.5s ease; } .zoom-close.transform .zoom { border: 0; } .zoom-close.transform .zoom:before { width: 2px; height: 17px; top: 1px; left: 7px; transform: rotate(45deg); transition: all 0.5s ease; } .zoom-close.transform .zoom:after { height: 2px; width: 17px; top: 9px; left: -1px; transform: rotate(45deg); transition: all 0.5s ease; } .zoom { width: 10px; height: 10px; border-radius: 8px; position: relative; border: 2px solid #000; } .zoom:before { content: ''; width: 2px; height: 8px; background: #000; display: block; top: 1px; left: 4px; position: absolute; transition: all 0.5s ease; } .zoom-inner { width: 8px; height: 3px; display: block; background: #000; position: absolute; top: 10px; left: 7px; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all 0.5s ease; } .zoom:after { content: ''; height: 2px; width: 8px; background: #000; display: block; top: 4px; left: 1px; position: absolute; transition: all 0.5s ease; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="col"> <div class="img"> <img src="https://via.placeholder.com/250"> <button class="zoom-close"> <div class="zoom"><span class="zoom-inner"></span> </div> </button> </div> </div>
Could anyone help me in the below case:任何人都可以在以下情况下帮助我:
<div class="img">
should be fit in to the window size (100% width), when we click on the <button class="zoom-close">
with the same transform effect. <div class="img">
应该适合窗口大小(100% 宽度),当我们点击具有相同变换效果的<button class="zoom-close">
时。
(Please note: CSS transform property is not compulsory but I need the similar effect as it is..) (请注意:CSS 变换属性不是强制性的,但我需要类似的效果。)
You need to get the screen sizes like width
and height
on zoom
event您需要在zoom
事件中获取屏幕尺寸,例如width
和height
HTML HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250" >
</div>
<br><br><br>
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
JS JS
var flag=0;
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
// $(".img").toggleClass("active", 1000);
var height= window.screen.height;
var width = window.screen.width;
if(flag == 0){
$("img").css("width", "15vw");
$("img").css("height", "15vw");
flag=1;
}
else{
$("img").css("width", "100vw");
$("img").css("height", "100vw");
flag=0;
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.