Question

我有一张图片，我只是想通过点击图片上的任意位置将其拉伸到全屏。所以，我把图像作为DIV的背景。我在使用javascript时出现问题：具体来说，是针对CSS。请用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>

Answer 1

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

Answer 2

您的代码不正确。查看此语法并自行编辑。

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

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

将html和body身高设置为100%

非常重要

html, body{
  height: 100%;
}

Answer 3

您是否考虑过点击添加/删除课程，而不是更改“此”课程中的属性？您甚至可以使用if else语句，我无法逐字重新创建代码。

考虑：

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

这允许你做的是有两个单独的CSS类，其中一个只在单击图像时才会激活，而另一个则不在。

P.S，Marcell也是对的。无论如何使用100％，但有其他选择。

考虑：

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

Answer 4

像这样：http://jsfiddle.net/kgkXT/？

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

在CSS集中

background-size:100% auto;

如何在单击按钮时将DIV拉伸到全屏？

4 个答案: