保持div高度與長寬比相關

我正致力於構建我們公司主網站的移動友好網站。它的設計方式是約2倍視網膜。我打算做的是將主要內容設置爲最大寬度640px，寬度設置爲100％。我有一個適合做這個的特定背景圖片。但隨着div的寬度變小，我需要調整高度。有任何想法嗎？保持div高度與長寬比相關

這裏的CSS：

*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;} 

body { 
    margin:0; 
    background-color:#fff; 
} 

.top, .body { 
    max-width:640px; 
    width:100%; 
    margin:0 auto; 
} 

.top { 
    background: white url(images/top.jpg) no-repeat; 
    background-size:auto; 
    overflow:hidden; 
    height:124px; 
    max-height:124px; 
} 

.top ul { 
    list-style:none; 
    height:100%; 
} 

.top ul li { 
    height:100%; 
    float:left; 
    display:block; 
}

來源

2012-05-28 agmcleod

我的確找到了答案。它增加了一點非語義標記，但效果很好。可以在這裏找到它：http://jsfiddle.net/AdQ3P/

邏輯在填充底部。基本上這需要是（img_height/img_width）* 100.

編輯這是代碼，所以不依賴於jsfiddle。

<div class="container"> 
    <div class="hero"></div> 
</div> 

.container { 
    width:100%; 
    max-width:500px; 
} 

.hero { 
    width:100%; 
    height:0; 
    background-size:100%; 
    background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat; 
    padding-bottom:75%; 
}

另外，這是一個凌亂的桌子我有哈哈。

來源

2012-06-13 14:48:04 agmcleod

你可能想看看這個博客文章:(看起來他是基於你的答案:) http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/ – Danield

可能：）。我相信我遇到了某處，併爲我的目的做了一些調整。 – agmcleod

有趣的想法。你是否有任何瀏覽器兼容性問題？ –

而一個非固定的寬度（例如，100％）取容器的所有寬度，元件的高度時，不設定爲固定大小將伸展以適應任何在（包括填充，邊距，邊框...）

如果您可以使用<img>標記而不是背景圖像，則可以將max-width:100%應用於圖像本身，並且它會縮放以適應容器 - 瀏覽器將負責調整其高度，以保持縱橫比一致 - 但是用ima替代css背景ge標籤並不總是可能的，或者是您可能面臨的語義和/或任何佈局問題方面的最佳選擇。

來源

2012-05-28 15:27:09 Luca

是的背景圖像實質上是一些看起來像按鈕的項目。我的計劃是適當地在上面放置一個鏈接列表。其中一些擴展了其他鏈接。也許是分開分開的最好方法。希望保持http請求下降:)。 – agmcleod

您可以通過創建單個精靈圖像，然後使用背景位置在列表中的每個項目上顯示正確的圖像，來保留這些資產的http請求： http://css-tricks.com/css-精靈/ – Luca

如果我想用你的建議來使用圖片標籤，是不是不可能讓這樣的功能？我之前在背景中使用過這些，非常非常方便。 – agmcleod

你也可以使用一個小小的jQuery。我相信它的優勢在於它是一種語義上有效的修復方法，所以編輯代碼的下一個人可能會更容易理解正在發生的事情。

// Maintain aspect ratio of #my_div 

// Set aspect ratio of #my_div 
var aspect_ratio = 0.8; 

// Store the jQuery object for future reference 
var $my_div = jQuery("#my_div"); 

// Within your document ready function, 
// Do an initial resize of #my_div 
$(document).ready(function(){ 
    $my_div.height($my_div.width() * aspect_ratio); 
}); 

// Resize #my_div on browser resize 
jQuery(window).resize(function() { 
    $my_div.height($my_div.width() * aspect_ratio); 
});

來源

2013-03-24 00:28:01 chrisfargen

偉大的解決方案，只需要$（document）.ready（function（）on $ my_div.height（$ my_div.width（）* aspect_ratio）; –

-1

使用新的相對字體大小單位（例如， vm（http://www.sitepoint.com/new-css3-relative-font-size/）。

來源

2013-12-23 00:44:23 user2917560

保持div高度與長寬比相關

回答

相關問題