Html 如何使图像具有响应性？_Html_Css_Responsive

Html 如何使图像具有响应性？

html css

Html 如何使图像具有响应性？,html,css,responsive,Html,Css,Responsive,我需要你的帮助，以使这个标志响应。非常感谢。这里有一个链接指向这个问题的可视化表示：gyazo是gif捕获程序 #header{ width:100%; height:70px; background-color:#d495a8; } .showcasemedia{ width:60px; transition:0.25s all ease; } .showcasemedia:hover{ -webkit-transform: scale(

我需要你的帮助，以使这个标志响应。非常感谢。这里有一个链接指向这个问题的可视化表示：gyazo是gif捕获程序

#header{
    width:100%;
    height:70px;
    background-color:#d495a8;
}
.showcasemedia{
    width:60px;
    transition:0.25s all ease;
}
.showcasemedia:hover{
       -webkit-transform: scale(1.05);
        cursor:pointer;
}
#header li{
    float:left;
    margin-top:4.5px;
    margin-left:20px;
}
.logoheader{
    transition: 0.5s all;
    margin-left: 38%;
}
.logoheader:hover{
    -webkit-transform: scale(0.95);
    cursor:pointer;
}
#header p{
    float:right;
    font-family: 'Tajawal', sans-serif;
    color:white;
    font-size:37px;
    margin-right:20px;
    margin-top:15px;
    transition:0.5s all;
    font-weight:bold;
}

#navbar{
    width:100%;
    height:30px;
    background-color:#ae657b;
}
#navbar li{
    float:left;
    margin-left:20px;
    margin-top:5px;
    color:white;
}

#navbar ul{
    margin-left:39.75%;
}



  <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
    </head>
        <title>Petnation index</title>
    <body>

    <div id="header"><!--Deschid div principal-->
            <ul><!--Deschid ul social media-->
                <li><img src="poze/facebook.png" class="showcasemedia"></li>
                <li><img src="poze/instagram.png" class="showcasemedia"></li>
            </ul><!--Inchis ul social media-->
            <img src="poze/logoscris.png" class="logoheader">
            <p>Paws make the laws!</p>
    </div><!--Inchis div principal-->

    <div id="navbar"><!--Deschid div principal-->
        <ul><!--Deschid ul navbar-->
            <li>Download</li>
            <li>Features</li>
            <li>Shop</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul><!--Inchis ul navbar-->
    </div><!--Inchis div principal-->

    </body>
    </html>

附言：我编辑这篇文章是为了获得更多的选票，我被无缘无故地扼杀了，我正试图摆脱禁令。谢谢你，希望你能理解。问题仍然存在。

请更新以下代码：

<div id="header"><!--Deschid div principal-->
    <ul style="float:left"><!--Deschid ul social media-->
        <li><img src="poze/facebook.png" class="showcasemedia"></li>
        <li><img src="poze/instagram.png" class="showcasemedia"></li>
    </ul><!--Inchis ul social media-->
    <img src="poze/logoscris.png" class="logoheader">
    <div style="float:right;">
        <p>Paws make the laws!</p>
    </div>

希望这就是您想要的。

您需要共享示例代码以获得帮助，请更清楚地说明您的要求。需要CSS方面的帮助吗？是的，在我为较小的设备进行另一个设计之前，我需要徽标尽可能靠近社交媒体按钮。代码如下：我可以有一个可以编辑CSS代码的工作演示吗？@EnderAdy请在帖子中包含相关代码。我不会下载一个未知的文件来回答你的问题。谢谢，但是我需要的是3个元素，社交媒体图标，徽标和文本，我希望左边的一个向左浮动，右边的一个浮动，中间的一个停留在中间。一旦我开始调整整个网页的大小，我希望中间的图像逐渐向左移动，就像文本一样，直到它不能再靠近为止，然后我使用meta标签为更小的屏幕设计它

    #header{
        width:100%;
        height:70px;
        text-align:center; //added this line
        background-color:#d495a8;
    }