Question

我的页面上有一个页脚部分，我希望将徽标保留在右下角，该徽标将随着页面大小的变化而调整大小。页面宽度不得超过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>

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

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;
    }

Answer 2

使用媒体查询获取较小的屏幕尺寸，并从徽标中删除最大高度（如果您希望固定高度，则可以：height：60px; object-fit：cover），否则您可以将height：auto设置为

。

.cny-logo-sm{
        width:100%;
        height:auto;
        object-fit: contain;/* or cover - for fixed size but images may crop*/
    }
    #system_footer_right ,  #system_footer_left
    {
    box-sizing:border-box;/*for padding issues */

    }
    @media screen and (max-width:500px)
    {
    #system_footer_right ,  #system_footer_left
        {
            max-width: 100%;
        }
        
    }

自动调整角落框的大小

2 个答案: