根據身高調整圖像以適合頁面

我遇到問題。我有一個我想用作背景的方形圖像（2048x2048）。我希望它能夠在頁面被拉伸爲寬屏高寬比時在頁面上有邊框。我也希望它能夠在頁面寬度小於縱橫比的情況下調整圖像的大小以保持它的方形。根據身高調整圖像以適合頁面

看來我只能做其中的一個，而不是兩個。

如果我使用：height:100%作爲圖像上的CSS屬性，它適用於較大的屏幕尺寸，但是當屏幕縮小時，圖像不會調整大小以適合我的水平滾動條。

如果，另一方面我使用：width:100%;爲CSS屬性，它的偉大工程爲小屏幕，但一旦它的大小以適合全屏幕，我得到垂直滾動條...

我想如果我是用：

width:100%; 
height:100%;

或

max-width:100%; 
max-height:100%;

，它將工作，但顯然不是...

我也試着給body標籤max-height:100%，甚至一個div容器相同的屬性，但沒有運氣...

任何人都可以點我在正確的方向嗎？

來源

2015-08-28 user3910071

您使用了'背景：蓋;' –

似乎並沒有任何工作。我是否應該將它與其他標籤一起使用？我試過100％的寬度和高度 – user3910071

你可以創建一個小提琴，這樣我可以幫你嗎？ –

你可以給body背景並指定background-size的值爲cover？

body { 
    background: url("2048x2048.png"); 
    background-size: cover; 
}

從文檔，約cover：

即是含有逆A關鍵字。儘量縮放圖像並保持圖像寬高比（圖像不會變形）。圖像「覆蓋」容器的整個寬度或高度。當圖像和容器具有不同的尺寸時，圖像將被剪裁成左/右或上/下。圖像自動居中，除非被另一個屬性（如background-position）覆蓋。

來源

2015-08-28 09:23:18

好吧，其實我想我誤解了我原來的帖子。它應該是一個*覆蓋*背景...對不起。所以會有一張橫跨整個頁面的背景圖片，然後這將覆蓋中心的一個方形。做同樣的事情嗎？ – user3910071

@ user3910071是的，它確實適用。試試看。如果有一個小提琴，它會很棒。 –

我的代碼在這裏https://jsfiddle.net/q3Lwo6ta/ – user3910071

這就是你正在努力實現的目標嗎？

https://jsfiddle.net/z9mc0g4t/

body { 
    background-image: url("http://thefoxisblack.com/desktop-wallpaper/Slumber-wallpaper-ipad.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

來源

2015-08-28 09:34:06

不是真的，因爲我總是希望看到完整的圖像，這意味着我要邊框邊緣，以便它保持它的方形長寬比 – user3910071

你的意思是當瀏覽器高度太小時，你想看到一個網站滾動條？因爲在這個例子中，你可以得到具有適當高寬比的完整圖像。 –

我不想要任何滾動條。我總是希望網站調整圖像的大小，以便沒有滾動條包含 – user3910071

試試這個 -

body { 
background-image: url('imageurl.png'); 
background-size: contain; 
}

@ user3910071你能爲img元素做也與這片CSS的 -

img { 
    max-width: 100vw; 
    max-height: 100vh; 
}

看到這裏工作fiddle，調整「結果」窗口的大小並查看圖像是否調整爲pe你的需要。

來源

2015-08-28 09:39:54

讓我更接近，但如果它不會被用作背景圖像呢？如果我想將圖像用作背景的疊加層，該怎麼辦？ – user3910071

@ user3910071如果你可以在jsfiddle上創建一個合適的工作示例，那麼我可以考慮一下。此外，如果它不是背景圖像，那麼試試這個 - max-height：100vh;最大寬度：100vh;' –

@ user3910071你檢查了我的更新答案嗎？請參閱我在答案中提供的小提琴演示，並請回覆它按預期工作或不工作？看到這個 - http://jsfiddle.net/wupsyuga/3/ –

您可以使用： background-size：cover; 或 background-size：contains;

來源

2015-08-28 09:42:01

包含讓我更接近，但如果它不會被用作背景圖像呢？如果我想將圖像用作背景的疊加層，該怎麼辦？ – user3910071

你可以嘗試：background-size：100％; –

你希望你的圖像寬高應該跟隨你的窗口寬度 - 高度始終是真正的縱橫比，並且沒有任何空白？

如果我正確理解你嘗試this

$(function() { 

// responsive wallpaper 
var img = $('.big_backgrounds img'); 
function bigPic() { 
    if (img.width() < $(window).width()) { 
     $('.big_backgrounds img').css({ 
      'width': '100%', 
      'height':'auto', 
      'left':'0', 
      'margin-left':'0' 
     }); 
    } else if ( 
     img.outerHeight() > $(window).outerHeight()) { 
     img.css({ 
      'width': '100%', 
      'height':'auto', 
      'left':'0', 
      'margin-left':'0'}); 
    } else { 
     img.css({ 
      'width': 'auto', 
      'height':'100%', 
      'left':'50%', 
      'margin-left': -(img.width()/2) }); 
    } 
} 
bigPic(); 
$(window).resize(function() { 
    bigPic() 
}); 

});

來源

2015-08-28 11:47:01

根據身高調整圖像以適合頁面

回答

相關問題