縮放瀏覽器時全屏背景圖像的最小尺寸

我目前正在嘗試修改具有全屏圖像作爲主頁的wordpress主題。現在它可以很好地與瀏覽器一起縮放，唯一的問題是它不會小於原始圖片的大小。它會變大並保持其縱橫比，但是當您縮小窗口大小時，它不會變小，然後是默認圖像大小。縮放瀏覽器時全屏背景圖像的最小尺寸

下面是這部分的主題CSS：

/* full screen slides */ 
.slides.full { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #373432; 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
    text-align: center; 
    color: #fff; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
} 

.slides.full img { 
    min-height: 100%; 
    min-width: 100%; 
    width: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

我用另一種方式進行的畫面去小那麼它的原始大小，但它並沒有堅持到瀏覽器的高度有隻是下面的灰色背景。

有人能幫我改變我發佈的CSS來做我想要實現的目標嗎？這將非常感謝！謝謝。

來源

2013-03-01 user2118155

最小高度時：100％的萎縮防止 - 剛剛成立高度 - 100％或自動 – MimiEAM 2013-03-01 01:24:41

我只是試過這個，它確實做了我的想法，但是當我拉動瀏覽器的寬度時，會縮小圖像的比例，但圖像下方會出現一個空的灰色區域，並填充底部瀏覽器越來越小，喜歡它不會堅持到底部，它只是縮小到角落裏。 – user2118155 2013-03-01 01:35:57

那你究竟想要什麼？以不變的比例收縮？ – MimiEAM 2013-03-01 01:39:36

您是否嘗試過將max-widht: 100%和max-height: 100%以及.slides.full img？

這只是一個瘋狂的猜測。看到一個現場示例會很有幫助。

來源

2013-03-01 01:20:23 Juanjo

感謝您的回覆！是的，我確實嘗試過，不幸的是它沒有改變任何東西。這裏是一個基本主題的例子：http://themeforest.net/item/anthe-wordpress/full_screen_preview/4070793這是我想如何擴展背景：http://saltsurf.com – user2118155 2013-03-01 01:24:34

那麼，在第二個一個背景用Javascript進行縮放。我猜你可以用'calc'在CSS中嘗試類似的東西，但這不適用於所有瀏覽器。你也可以嘗試將圖像放在CSS背景中，而不是'img'，現在可以使用'background-size：cover'，對IE6-8有更好的瀏覽器支持（比calc更好）和jQuery填充 – Juanjo 2013-03-01 01:41:51

這將保持正確的比例爲IMG

.slides.full img { 
    height: auto; 
    width: auto; 
    max-width: 100%; 
    max-height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    }

並改變height:100%將拉伸IMG調整

來源

2013-03-01 01:41:31 MimiEAM

再次感謝您的回覆！當我嘗試這種方式時，它會縮小比例，但當我放大時，它的大小不會超過其默認大小，並且只有灰色的背景。 – user2118155 2013-03-01 01:48:10

等你縮小你想要一個擠壓的背景，並在規模上你想要一個合適的？ – MimiEAM 2013-03-01 01:56:04

這裏是我想如何擴展的一個例子：http：//saltsurf.com – user2118155 2013-03-01 02:00:20

.slides.full img { 
    max-width:100%; /* lower virsion of IE won't work width max-width */ 
    width:100%;   /* for IE */ 
}

來源

2013-03-01 07:17:14 jhunlio

縮放瀏覽器時全屏背景圖像的最小尺寸

回答

相關問題