html - 自动调整 Angular 框的大小

Question

我的页面上有一个页 footer 分，我想在右下角保留一个 Logo ，该 Logo 会随着页面大小的变化而调整大小。永远不要超过页面宽度的 30%，高度也不要超过 60px。我怎样才能做到这一点？

这是我正在使用的 CSS。

    #system_footer{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        background-color: transparent;
        color:azure;
        text-align: center;
        font-size:8px;
        margin: auto;
    }

    #system_footer_center{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        background-color: transparent;
        color:azure;
        text-align: center;
        font-size:8px;
        margin: auto;
    }
    #system_footer_right{
        background: rgb(170,213,255);
        background: linear-gradient(rgba(170,213,255,0.5) 8%, rgba(5,51,107,1) 29%, rgba(5,51,107,0.6362920168067228) 67%, rgba(170,213,255,1) 100%, rgba(5,51,107,1) 100%);

        padding:14px;
        float:right;
        max-width: 30%;
        text-align:right;

        border-radius: 10px 0px 0px 10px;
        border: 10px 0px 10px 10px ridge white;

        box-shadow: -5px -0px 3px 2px rgba(255,255,255,0.75);
    }

    #system_footer_left{
        background: rgb(170,213,255);
        background: linear-gradient(rgba(170,213,255,0.5) 8%, rgba(5,51,107,1) 29%, rgba(5,51,107,0.6362920168067228) 67%, rgba(170,213,255,1) 100%, rgba(5,51,107,1) 100%);

        padding:14px;
        float:left;
        max-width: 30%;
        text-align:left;

        border-radius: 0px 10px 10px 0px;
        border: 10px 10px 10px 10px ridge white;

        box-shadow: 5px 0px 3px 2px rgba(255,255,255,0.75);
    }

    .cny-logo-sm{
        width:auto;
        max-height:60px;
        object-fit: scale-down;
    }

@media screen and (min-width: 300px) {
    #system_footer_center {
        font-size: calc(8px + (14 - 8) *  ((100vw - 300px) / (1000 - 300)));
  }
}

这是页脚 HTML。

<div id="system_footer">

    <div id="system_footer_left"> <!-- Reserved for Future Use -->
        <img src="<?PHP echo SYS_URL;?>resources/logo/cny_logo_name_white_trans_sm.png"  alt="[Logo] CNY Logo2 Placeholder" class="cny-logo-sm" style="visibility: hidden" > 
    </div>  
    <div id="system_footer_right">
        <img src="<?PHP echo SYS_URL;?>resources/logo/cuny_logo_name_white_trans_sm.png"  alt="[Logo] CNY Main Logo" class="cny-logo-sm">
    </div>
    <div id="system_footer_center"><p>For technical support, please contact OTE </p></div>

</div>

(请注意，左页脚目前为 Logo TBD 保留并且仍在设计中...因此我们使用右 Angular 的隐藏版本以确保大小相等。 如前所述，目标是调整 Angular 落“错误”的大小不超过页面的 30%，同时调整 Logo 的大小。

Answer 1

尝试使用 flex，https://codepen.io/divijbhardwaj/pen/jjvWZK

    <div class="footer">
    <img src="https://imgcomfort.com/Userfiles/Upload/images/illustration- 
    geiranger.jpg" class="left-logo">

    <img src="https://imgcomfort.com/Userfiles/Upload/images/illustration- 
    geiranger.jpg" class="mid-logo">

    <img src="https://imgcomfort.com/Userfiles/Upload/images/illustration- 
    geiranger.jpg" class="right-logo">

    </div>

   .footer{
    width:100%;
    height:100px;
    background-color:lightgrey;
    display:flex;
    flex-direction:row;
    /*justify content:flex-end to move all to right*/
    justify-content:space-between;
    align-items:center;
     }
    .right-logo,.mid-logo,.left-logo{
    display:flex;
    max-height:60px;
    max-width:30%;
    border:1px solid black;
    }