宽度100％至全尺寸问题

为了制作垂直的手风琴廊，我制作了100％至全尺寸的div。它实际上的作品，唯一的问题是，调整大小的动画是奇怪的，它在调整大小的过程中弄平了我的照片，你可以看到：http://hine.be/test 宽度100％至全尺寸问题

你对我如何修复它有什么想法吗？这里是我的代码：

<!DOCTYPE html> 
<head> 
<style> 
input{display:none} 
.ani 
{ 
width:100%; 
height:100px; 
background:url(paonad.jpg) center no-repeat; 
background-size: 100% auto; 
transition:all 2s; 
-moz-transition:all 2s; /* Firefox 4 */ 
-webkit-transition:all 2s; /* Safari and Chrome */ 
-o-transition:all 2s; /* Opera */ 
display:block; 
} 
input:checked + .ani 
{ 
height:400px; 
background-size: 4000px 400px; 
} 

.ani2 
{ 
width:100%; 
height:100px; 
background:url(spacingad.jpg) center no-repeat; 
background-size: 100% auto; 
transition:all 2s; 
-moz-transition:all 2s; /* Firefox 4 */ 
-webkit-transition:all 2s; /* Safari and Chrome */ 
-o-transition:all 2s; /* Opera */ 
display:block; 
} 
input:checked + .ani2 
{ 
height:400px; 
background-size: 4000px 400px; 
} 
</style> 
</head> 
<body> 
<input type="checkbox" id="paon"> 
<label class="ani" for="paon"></label> 
<input type="checkbox" id="space"> 
<label class="ani2" for="space"></label> 
</body> 
</html>

编辑：http://jsfiddle.net/ht5F8/

感谢Lowkase！

来源

2013-03-12 Oreki Houtarou

你所说的 “扁平化” 呢？你的意思是随着浏览器宽度的大小调整图像？ – Lowkase 2013-03-12 17:04:22

@Lowkase我的意思是在调整动画大小时，div的高度是0而不是不断增加。 – 2013-03-12 17:07:49

O，我看到你需要点击图片并开始CSS转换。然后图像回到原来的大小，高度降到0，这实际上“平整”了图像。 – Lowkase 2013-03-12 17:09:21

终于找到了Oreki：

http://jsfiddle.net/rzB3E/

在你的.ANI类，你需要指定你的最低高度是这样的：相反

background-size: 100% 100px;

这个：

background-size: 100% auto;

我也偶然发现了一个更优雅的解决方案：

http://jsfiddle.net/XcFxQ/104/

<div class="my_img"></div> 

.my_img{ 
    width:100%; 
    height:100px; 
    background:url(http://www.deshow.net/d/file/animal/2009-07/cute-kitten-631-4.jpg) center no-repeat; 
    background-size: 100% 100px; 
    transition:all 2s; 
    -moz-transition:all 2s; /* Firefox 4 */ 
    -webkit-transition:all 2s; /* Safari and Chrome */ 
    -o-transition:all 2s; /* Opera */ 
    display:block;  
} 

.my_img_large{ 
    height:400px; 
    background-size: 4000px 400px;  
} 

$('.my_img').click(function(){ 
    if ($(this).hasClass('my_img_large')) { 
     $(this).removeClass('my_img_large'); 
    } else { 
     $(this).addClass('my_img_large'); 
    } 
});

来源

2013-03-12 19:26:49 Lowkase

非常感谢！我遵循你的优雅的解决方案，我做了一些修改，以防止图像伸展，但我似乎无法再花费我的div，只是背景。你知道为什么吗？ http://jsfiddle.net/ht5F8/ – 2013-03-13 01:15:53

你的意思是Oreki？你的意思是

？ – Lowkase 2013-03-13 01:23:58

是的，my_img，你可以在我链接的例子中看到，我可以“缩放”，但不能扩展div本身。 – 2013-03-13 01:34:35

宽度100％至全尺寸问题

回答

相关问题