Html 徽标图像可以做出响应，但不会'；我不在办公室工作

我一直在努力使我的标志形象响应。所以它会根据屏幕大小变大或变小。如果我在图像中使用“最大宽度”，而它所在的div中没有给出高度和宽度，那么它可以工作。我可以保持这种方式，但图像大小比我想要的大得多。另一方面，如果我在div中使用height和width，图像响应就不起作用

这是我到现在为止一直在尝试的

HTML

---

您可以使用CSS媒体查询，以便在指定的最小屏幕宽度（或高度）下更改CSS属性。在您的情况下，这将是徽标图像的

高度

和

宽度

：

马汀
国际的

.nav侧栏#logo.logo{
位置：绝对位置；
宽度：130px；
高度：130像素；
前-47%；
左：30%；
}
@媒体屏幕和屏幕（最小宽度：480px）{
.logo img{
宽度：110px；
高度：110px；
}
}
@媒体屏幕和屏幕（最小宽度：1366px）{
.logo img{
宽度：130px；
高度：130像素；
}
@媒体屏幕和屏幕（最小宽度：1920像素）{
.logo img{
宽度：150px；
高度：150像素；
}
}

---

注：所写示例使图像的宽度/高度为110px，当屏幕（视口）的最小宽度为480px时，图像的宽度/高度为130px，当屏幕的最小宽度为1366px时（对于浏览笔记本电脑而言非常常见），对于屏幕的最小宽度为1920px时，图像的宽度/高度为150px（对于桌面显示器而言非常常见）。请记住，此功能不仅仅适用于图像，您可以使用此功能缩放任何对象。

位置：绝对；

将破坏响应性。我是否应该使用边距？请您分享您想要的确切结构。

<div class="nav-sidebar">
    <div id="logo">
        <div class="logo">
            <img src="images/backgrounds/logo.png">
        </div>
        <div class="logo1" id="matin">
            <span class="notranslate">MATIN</span>
            <span class="shade">&nbsp;</span>
        </div>
        <div class="logo2" id="int">
            <span class="notranslate">INTERNATIONAL</span>
            <span class="shade">&nbsp;</span>
        </div>
    </div>

.nav-sidebar #logo .logo {
    position: absolute;
    width: 130px;
    height: 130px;
    top: -47%;
    left: 30%;
}

.logo img{
    max-width: 100%;
    height: auto;
}