相對於高度的自動寬度+調整窗口大小

我正在構建一個Web應用程序，我想要一個特定元素相對於它的父級進行縮放。據我所知，唯一不使用javascript的方法是使用具有所需長寬比的圖像（有關於此問題的其他幾篇Stackoverflow文章），這就是我所做的，所以基本如此：相對於高度的自動寬度+調整窗口大小

div { height:20%; display:inline-block; } 
div img { height:100%; }

這會導致div按我想要的方式縮放，但問題是當瀏覽器調整大小時，圖像的寬度會發生變化，但div的寬度不會。刷新頁面後，該元素將再次正確縮放。

我在此做了一個工作示例：https://jsfiddle.net/r1efuzmb/當您調整瀏覽器或Jsfiddle網站上的「輸出」列時，可以看到問題。

一些注意事項：

問題只發生在Chrome和IE。在Firefox和Safari中，div正確縮放。
我可以使用vh單位設置寬度，但由於我試圖縮放這個元素相對於它的父母而不是視口，它並不是真正理想的。

有誰知道這是瀏覽器問題還是有辦法解決這個問題？

謝謝！

來源

2017-01-16 Leon

所以，你必須定義，只有高度父元素，並希望孩子確定寬度？介意告訴我們這個「特定元素」是什麼？ – Sprazer

我正在創建一個cardgame。頁面底部有一個「酒吧」，相對於身體的高度爲20％。這個酒吧包含項目（「卡片」），我想給予相對於「酒吧」100％的高度，但包含他們的長寬比。 – Leon

您可以在before僞元素上使用padding-top來獲得與使用圖像相同的效果。

來源

2017-01-16 16:22:37

恐怕我不行，因爲這會縮放相對於元素寬度的高度。我試圖做相反:) – Leon

div img { height: auto; width: 100%; }

圖像將填充其合適的寬高比的容器。

來源

2017-01-16 16:33:38 ed1nh0

這將工作，如果容器將有一個寬度，我想要一個自動的高度。我試圖達到完全相反。 – Leon

@Leon對不起，我想我誤解了這個問題。以下是另外一個提示：如果您使用圖像只是爲了表現自己的想法，爲什麼不使用Flexbox模型來製作這些卡片？ – ed1nh0

我認爲，通過使用浮動並讓圖像容器總是20vh可能是在你的情況下可能的解決方案。

html, body { 
 
    height:100%; 
 
    margin: 0; 
 
} 
 
.card-container { 
 
    height:20vh; 
 
    display:inline-block; 
 
    background-color:red; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background-color:lightgray; 
 
} 
 
.cards{ 
 
    height: 20vh; 
 
    display: inline-block; 
 
    position: relative; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%); 
 
    -ms-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
} 
 
.cards:after{ 
 
    content:""; 
 
    display:block; 
 
    clear:both;} 
 

 
.cards img { 
 
    display: block; 
 
    float: left; 
 
    height:100%; 
 
    width:auto; 
 
    padding:0 2px; 
 
}

<div class="card-container"> 
 
    <div class="cards"> 
 
    <img src="http://lorempixel.com/100/150/"> 
 
    <img src="http://lorempixel.com/100/150/"> 
 
    <img src="http://lorempixel.com/100/150/"> 
 
    <img src="http://lorempixel.com/100/150/"> 
 
    </div> 
 
</div>

來源

2017-01-16 16:57:56 Sprazer

感謝您的回覆。問題是，「卡」需要是一個div，以便我可以應用其他樣式，我不能使用圖像。我只是使用圖像來調整div .. – Leon

我明白了，你見過這個q嗎？ http://stackoverflow.com/questions/36983773/make-a-div-act-like-an-image – Sprazer

相對於高度的自動寬度+調整窗口大小

回答

相關問題