寬度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％至全尺寸問題

回答

相關問題