0

我有一张图片，我只是想通过单击图片上的任意位置将其拉伸到全屏。因此，我将图像作为 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>
4

4 回答 4

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

小提琴

于 2013-08-27T12:02:38.350 回答
1

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

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-27T11:59:18.603 回答
0

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

考虑：

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

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

PS，马塞尔也是正确的。无论如何都要使用 100%，但还有其他选择。

考虑：

position: absolute;
top: 0;
bottom: 0;
于 2013-08-27T11:58:21.700 回答
0

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

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

在 CSS 集中

background-size:100% auto;
于 2013-08-27T12:00:33.530 回答