单击按钮时，我怎样才能将DIV拉伸为全屏？

我有一张图片，我只是试图通过点击图片上的任何位置来将其展开为全屏。所以，我将这幅图像作为DIV的背景。我遇到了javascript问题：特别是针对CSS。请让我知道通过使用jsfiddle。单击按钮时，我怎样才能将DIV拉伸为全屏？

这里是我当前的尝试：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>

来源

2013-08-27 Wolfpack' 08

$('#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; 
}

Fiddle

来源

2013-08-27 12:02:38 Turnip

添加到你的答案中，你也可以使用背景-size：cover;通过裁剪图像来删除任何边框请参阅http://jsfiddle.net/hSzq7/22/ –

我喜欢这么多 – Nickool

@David Hewitt在裁剪图像时，我决定不要使用'cover'。只是一个猜测，但我假设OP想要完整的形象 – Turnip

你有没有考虑上添加/删除点击一类，而不是改变“这个”类中的属性？你甚至可以使用一个if else语句，从头顶开始，我不能逐字地重新创建代码。

考虑：

$(function() {      
$(".clickable").click(function() { 
$(this).addClass("stretched"); 
}); 
});

这是什么让你做的是有两个不同的CSS类时在图像点击其中一个只会变得活跃，而其他时候是没有的。

P.S，Marcell也是正确的。通过一切手段使用100％，但有其他选择。

考虑：

position: absolute; 
top: 0; 
bottom: 0;

来源

2013-08-27 11:58:21 user5623896726

您的代码是不正确的。看看这个语法并自己编辑它。

http://jsfiddle.net/hSzq7/12/

$(function(){ 
    $('div#stretch').click(function(){ 
    $(this).css('height',"33px").css('width',"100%"); 
    }); 
});

重要的是要设定html和body高度100%

html, body{ 
    height: 100%; 
}

来源

2013-08-27 11:59:18 M1K1O

老兄，你有没有注意到，当你设置 '高度'，“100％ “，图像消失了？ –

因为你没有将'HTML'和'BODY'的高度设置为'100％' – M1K1O

喜欢这个：http://jsfiddle.net/kgkXT/？

$(document).ready(function(){ 
    $('#stretch').click(function(){ 
     $(this).css('width',"100%"); 
    }); 
});

并在CSS设置

background-size:100% auto;

来源

2013-08-27 12:00:33 lawl0r

所以这个id跟在$（'之后，而规则在.css之后（对吧？ –

没有冒犯，但是你的语法如此完全关闭和jquery甚至没有包括在你的小提琴中，我建议阅读http://learn.jquery.com/about-jquery/how-jquery-works/和/或学习javascript的基本语法。 – lawl0r

是啊，bud。这是真的，我已经学会了，并且重新学习了它，但是我没有专业的做，我真的需要创建一个带有个性化参考标记的好资源列表 –

单击按钮时，我怎样才能将DI​​V拉伸为全屏？

回答

相关问题

单击按钮时，我怎样才能将DIV拉伸为全屏？