Question

为了制作一些垂直的手风琴画廊，我制作了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！

Answer 1

终于找到了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');
    }
});

宽度100％到完整尺寸问题

1 个答案: