Question

我一直在尝试使徽标图像具有响应性。以便根据屏幕尺寸变大或变小。如果我在图像中使用max-width而在其所在的div中未指定高度和宽度，则可以使用它。我可以保持这种方式，但是图像尺寸比我想要的大得多。另一方面，如果我在div中使用了高度和宽度，则图像响应能力将无法正常工作。

这是我到目前为止尝试过的。

HTML

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

CSS

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

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

Answer 1

您可以使用CSS Media Queries，以便对于指定的最小屏幕宽度（或高度），可以更改CSS属性。您的情况就是徽标图片的height和width：

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

@media screen and (min-width: 480px){
    .logo img {
        width: 110px;
        height: 110px;
    }
}

@media screen and (min-width: 1366px){
    .logo img {
        width: 130px;
        height: 130px;
    }

@media screen and (min-width: 1920px){
    .logo img {
        width: 150px;
        height: 150px;
    }
}

注意：示例中编写的示例使图像的宽度/高度为110px（当屏幕（视口）的最小宽度为480px时）；为130px（当最小屏幕宽度为1366px（在浏览笔记本电脑时很常见））；而对于屏幕的最小宽度为1920像素（台式机显示器常见）。请记住，此功能并不仅仅适用于图像，您可以使用此功能进行缩放。

徽标图像可以做出响应，但不能在div中使用

1 个答案: