CSS調整div的大小，同時保持包含圖像的縱橫比

Question

我有一個里面有 img 的 div 容器：

<div id='triangle'>
     <img src='/static/triangle.png' style='position: absolute; height: 100%; width: 100%'>
</div>

如何將 div 的大小調整為 500px 的高度並保持縱橫比？ 我試過了：

#triangle 
{
     position: absolute;
     height: 500px;
     width: auto;
}

但它不起作用：或者：

#triangle 
{
     position: absolute;
     max-height: 500px;
     max-width: 500px;
}

創建一個 500x0 像素的 div。

Answer 1

您應該從圖像標簽中刪除“位置：絕對”。 因為 parent 已經用 position: absolute 設置了樣式；

Answer 2

嘗試應用此樣式並從元素中刪除內聯樣式：

#triangle {
    height:500px;
    width: max-content;
}

img {
    height:100%;
}

Answer 3

您需要做的是根據您的需要使 img 標簽的寬度或高度屬性之一等於 100%，另一個等於 auto。

此外，您的 img 標簽不得具有position:absolute功能。 因此，您的代碼應如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #triangle 
            {
              position: absolute;
              height: 500px;
              width: 500px;
            }
        </style>
    </head>
    <body>
        <h2>HTML Image</h2>
        <div id="triangle">
            <img src='/static/triangle.png' width="100%" height="auto">
        </div>
    </body>
</html>

CSS調整div的大小，同時保持包含圖像的縱橫比

問題描述

3 個解決方案

解決方案1
0 2020-08-24 07:28:09

解決方案2
0 已采納 2020-08-24 07:31:11

解決方案3
0 2020-08-24 07:40:42

CSS調整div的大小，同時保持包含圖像的縱橫比

問題描述

3 個解決方案

解決方案1 0 2020-08-24 07:28:09

解決方案2 0 已采納 2020-08-24 07:31:11

解決方案3 0 2020-08-24 07:40:42

解決方案1
0 2020-08-24 07:28:09

解決方案2
0 已采納 2020-08-24 07:31:11

解決方案3
0 2020-08-24 07:40:42