0

我制作了一个 100% 到全尺寸的 div，以便制作一些垂直的手风琴画廊。它确实有效，唯一的问题是调整大小的动画很奇怪，它在调整大小期间使我的图片变平，如您所见：http ://hine.be/test

你对我如何解决它有任何想法吗？这是我的代码：

<!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 ！

4

1 回答 1

1

终于找到折木了：

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-12T19:26:49.320 回答