如何在单击按钮时将DIV拉伸到全屏？ [英] How can I stretch a DIV to full-screen upon clicking a button?
本文介绍了如何在单击按钮时将DIV拉伸到全屏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个图片，我只是想通过点击图片上的任何地方将其拉伸到全屏。所以，我使图像的DIV的背景。我遇到了javascript的问题：具体来说，针对CSS。
I've got an image, and I'm just trying to stretch it to full-screen by clicking anywhere on the image. So, I made the image the background of a DIV. I'm having trouble with the javascript: specifically, targeting the CSS. Please, let me know by using jsfiddle.
这是我目前的尝试： http://jsfiddle.net/Muimi/hSzq7/
$(document).ready(function (){
$('.beforeClick').click(function (){
$('.beforeClick').css(div#stretch'width',"33fpx");
$(this).css(div#stretch'width',"100%");
});
});
div#stretch{
height: 334px;
width: 640px;
background-image: url(http://i.investopedia.com/inv/articles/slideshow/6-generic-products/generic-just-as-good.jpg);
}
<body>
<div id="stretch"></div>
</body>
推荐答案
$('#stretch').click(function() {
$(this).toggleClass('fullscreen');
});
CSS
html, body {
height: 100%;
min-height: 100%;
}
div#stretch{
height: 334px;
width: 640px;
background-image: url(http://i.investopedia.com/inv/articles/slideshow/6-generic-products/generic-just-as-good.jpg);
}
div#stretch.fullscreen {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
这篇关于如何在单击按钮时将DIV拉伸到全屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
