通過CSS設置基於高度的元素寬度

我有一組元素並要求它們的最小寬度等於它們的高度，但高度沒有明確設置。目前，我能夠通過通過jQuery設置CSS屬性min-width實現這一目標：通過CSS設置基於高度的元素寬度

$(document).ready 
(
    function() 
    { 
     $('.myClass').each 
     (
      function() {$(this).css('min-width', $(this).css('height'));} 
     ); 
    } 
);

是否有可能直接在CSS指定此行爲？

下面是一個展示的jsfiddle什麼，我想實現：http://jsfiddle.net/p8PeW/

來源

2011-05-27 verdesmarald

-2

我不相信這是可能沒有JS，但也許有人能證明我錯了嗎？

CSS不允許你使用動態變量，所以如果高度沒有設置，直到頁面加載，我不知道如何做到這一點。

來源

2011-05-27 05:05:44 Jeff

見的答案。有可能的。 – 2013-08-28 01:50:35

如果你正試圖使廣場，你必須考慮到這兩種情況下（W > H和W < H）：

$('label').each(function() { 
    if ($(this).height() > $(this).width()) { 
     $(this).css('min-width', $(this).height()); 
    } else { 
     $(this).css('min-height', $(this).width()); 
    } 
});

來源

2011-05-27 05:17:05 Blender

不，我很高興這個元素的寬度比它高，只是不高於寬度。 – verdesmarald 2011-05-27 05:19:11

這實際上是可能沒有JS！

關鍵是要使用<img>這是一個replaced element，因此如果你只設置高度，它的寬度將自動設置，以保持圖像的固有高寬比。

因此可以執行以下操作：

<style> 
    .container { 
    position: relative; 
    display: inline-block; /* shrink wrap */ 
    height: 50%; /* arbitrary input height; adjust this */ 
    } 
    .container > img { 
    height: 100%; /* make the img's width 100% of the height of .container */ 
    } 
    .contents { 
    /* match size of .container, without influencing it */ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 
</style> 

<div class="container"> 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
    <div class="contents"> 
    Put contents here. 
    </div> 
</div>

如果你想.contents爲具有4：3的縱橫比，那麼你將代替設置在img至133％的高度，所以的寬度img，因此.contents將是.container高度的133％。寬高比爲4：

的1現場演示http://jsbin.com/afecej/1/edit（帶有附加代碼的註釋）

如果你想知道，在img數據URI爲1x1 px transparent gif）。如果圖像沒有1：1的寬高比，則必須調整相應設置的高度值。

來源

2013-02-16 15:34:36

這是一個夢幻般的解決方案..這應該是答案！謝謝@約翰 – haxxxton 2014-02-06 06:28:01

任何人都可以通過例如'.container：first-child :: before {...}'？可能會有一個解決方案非常有用_只使用css_！ – Matmarbon 2014-09-20 12:06:32

這個方法可以使用'

從W3C Box Model上填充：

<percentage> The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

所以你只使用CSS可以擁有它。請參閱this example從this blog post另一個主題同樣有趣。

來源

2013-05-31 20:29:37

還有一個非常簡單的CSS解決方案，但僅適用於確切的情況下，OP在他的jsfiddle介紹：下面@Josh的

label { 
 
    background-color: Black; 
 
    color: White; 
 
    padding: 1px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    min-width: 1em; /* set width to the glyphs height */ 
 
}

<label>A</label><br/> 
 
<label>B</label><br/> 
 
<label>C</label><br/> 
 
<label>D</label><br/> 
 
<label>E</label><br/> 
 
<label>F</label><br/> 
 
<label>R6a</label>

來源

2015-06-11 11:14:56 Simon

通過CSS設置基於高度的元素寬度

回答

相關問題