CSS - 設置div寬度100％並調整大小保持縱橫比

我有一個背景圖片的div，將覆蓋標題幻燈片的一部分。我希望div的寬度始終爲窗口大小的100％，即使用戶重新調整大小也是如此。高度應根據背景圖像的寬高比進行更改。背景圖片的尺寸爲1500x406。CSS - 設置div寬度100％並調整大小保持縱橫比

這裏的示例代碼：

HTML

<div id="wrapper" class="clearfix"> 
    <div id="bg_img"></div> 
</div>

CSS

.clearfix { 
    width: 100%; 
    position: relative; 
    display: block; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    line-height: 1.5; 
} 

#bg_img { 
    background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat; 
    position: absolute; 
    z-index: 100; 
    top: 9em; 
    width: 100%; 
    height: 406px; 
    margin: 0 auto; 
    display: inline; 
}

工作JSFiddle

來源

2014-01-16 Daniel Harris

你需要JS爲。如果你對純CSS解決方案感興趣，可以看看'background-size：cover;'[demo]（http://jsfiddle.net/9XG5w/4/） – alizahid

爲什麼不試試： 'background：url （'http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg'）repeat' – Aditya

你不需要JS。 – Popnoodles

要使元素保持比例不變，你只需要使用此代碼

<div id="some_div"></div> 

#some_div:after{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* the percentage of y over x */ 
}

因此，這是如何實現的。 Demo

<div id="wrapper"> 
    <div id="bg_img"></div> 
</div> 
<div class="clearfix"></div>

N.B.這個解決方案不需要clearfix，OP在他的代碼中有。

CSS

#wrapper{ 
    position: relative; 
    width: 100%; 
} 
#wrapper:after{ 
    content: ""; 
    display: block; 
    padding-top: 27.06666%; /* 406 over 1500 */ 
} 
#bg_img{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url(http://placekitten.com/1500/406); 
    background-size: 100% 100%; 
}

來源

2014-06-05 15:53:27 Popnoodles

謝謝！這應該是被接受的答案。 – MattiSG

-1

這個有點扭曲了形象，但它可能是你在找什麼：

#bg_img { 
    background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat; 
min-width:100%; 
min-height:100%; 
background-size:cover; 
}

來源

2014-01-16 22:18:54 Craighead

不起作用... http://jsfiddle.net/qjdLU/ –

這是我已經在過去用於支持回IE8。配合使用插件在這裏一個小JS支持過濾器：http://louisremi.github.io/jquery.backgroundSize.js/demo/

img { 
-webkit-background-size:cover; 
-moz-background-size:cover; 
background-size:cover; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover')";} 
background-position:50% 0; 
}

來源

2014-01-16 22:33:59 Aaron

我發現了一個解決方案，它是簡單的，對我的偉大工程。爲您需要的寬高比創建一個透明的PNG，例如15px x 4px。

將圖像放在div中。將圖像的寬度設置爲100％。它會擴展到div的寬度，並以適當的長寬比垂直增長，將div的高度降低到適當的寬高比。

像這樣的東西（這個確切的樣本未經）：

<div style="width: 100%"> 
<img src="..." style="width: 100%" /> 
</div>

你可以，當然，與其他尺寸（高度），以及通過定義它，而不是寬度的做到這一點。

夠簡單。適用於我。

- 安德魯

來源

2014-12-10 21:22:23

CSS - 設置div寬度100％並調整大小保持縱橫比

回答

相關問題