css背景圖像調整寬度作物高度

我正在使用此代碼從css技巧和竅門來覆蓋背景圖像。問題在於它重新縮放圖像以適應寬度和高度，並改變高寬比。我想讓背景圖像重新縮放爲全屏寬度，然後僅裁剪高度（從圖像的頂部開始，而不是中央）以覆蓋視圖端口。這樣，圖像寬高比將保持不變。css背景圖像調整寬度作物高度

我的第二個問題是，它似乎並沒有工作，除非我使用圖像的FQDN而不是下面的URL。

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

來源

2012-06-27 markhorrocks

而不是

background-size: cover;

你將要使用

background-size: 100% auto;

封面將圖像伸展到最小尺寸，使得它的寬度和高度都可以容納裏面的內容地區，因此你的問題。詳細瞭解over here。

來源

2012-06-27 03:38:16 Nit

我會用JS代替它。 CSS似乎還沒有很好地處理寬高比。

試試這樣的事情：

首先，創建一個div，並把圖像中它

<div class="big-image"> 
    <img src="path.jpg" width="1000" height="1000" alt="whatever"> 
</div>

那麼做到這一點在你的CSS：

.featuredImage img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -10; 
} 
/* this class will be added via JS */ 
.bgwidth { width: 100%; } 
.bgheight { height: 100%; }

最後，你的JS

var theWindow = $(window), 
    $bg = $(".big-image img"), // Use your image selector here. 
    aspectRatio = $bg.width()/$bg.height(); 

    $bg.removeAttr('width'); 
    $bg.removeAttr('height'); 

    function resizeBg() { 
    if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
     $bg 
     .removeClass() 
     .addClass('bgheight'); 
    } else { 
     $bg 
     .removeClass() 
     .addClass('bgwidth'); 
    } 
    } 
    theWindow.resize(function() { 
    resizeBg(); 
    }).trigger("resize");

讓我知道這是否合理。不只是我知道的CSS，但它是一個解決方案

來源

2012-06-27 03:46:29 DavidVII

當您使用cover時，圖像寬高比不會改變。不過，我相信你想要的是修復圖像的底部，因爲你告訴過你希望它從頂部而不是從中心開始裁剪，我認爲你不想從頂部和底部說出。

如果你想保持底部的底部（也許是一個可避免的大天空的草地？），那麼你將需要從center center改變定位到center bottom。

如果您按照Nit建議的方式將其設置爲100％自動，那麼在html元素的高度/寬度比例大於圖像的窗口上，您會在頂部看到空白空間，特別是您想要的如果您使用的圖像在頂部淡入相同的顏色...

對於第二個問題，它不是fqdn，它是您的路徑的相對/絕對引用。根據你的CSS，應該有一個圖像文件夾，其中你的CSS文件是其中有一個bg.jpg。

index.html 
main.css 
images/ 
    bg.jpg

來源

2012-06-27 03:53:19 hasanyasin

感謝您的回覆。實際上，我希望圖片的頂部是固定的，從底部開始裁剪。即使圖像位於圖像文件夾中，相對URL也不起作用。他們只能通過使用FQDN – markhorrocks

才能使其工作。然後，您可以使用「中心頂部」而不是「中心中心」或「中心底部」來定位圖片。關於圖像文件，你的文件夾結構是什麼？這真的沒有道理。如果images文件夾和css文件位於同一個地方，並且它有一個bg.jpg文件，當你說url（images/bg.jpg）時，它會找到它。唯一可以防止這種情況的方式是，您的css採用html中的樣式標記，並且在此文檔中使用基本標記。在這種情況下，你應該寫出相對於這個基礎href的圖像路徑。 – hasanyasin

css背景圖像調整寬度作物高度

回答

相關問題