如何使您的网站徽标具有响应性？答案

【问题标题】：how to make your website logo to be responsive?如何使您的网站徽标具有响应性？
【发布时间】：2018-12-25 03:42:30
【问题描述】：

我已将徽标的最大宽度设置为 112，它非常适合桌面版，而对于移动版则不是。这是我网站的链接http://mediagrafter.com/logistics/#？

我已尝试减少左边距，但在移动版（响应式）中没有调整。

<pre>
    <img src="wp-content/uploads/2018/09/logo.png" alt="" style="
        max-width: 112%;
    ">
</pre>

我希望在移动视图中调整徽标（响应式），但它显示了一半的徽标。

【问题讨论】：

【解决方案1】：

我猜你可以设置宽度为100%，然后将object-fit属性设置为contain

其他想法是设置

{ width: 100%, height: auto; }

【讨论】：

【解决方案2】：

首先，试试这个：

<pre>
    <img src="wp-content/uploads/2018/09/logo.png" alt="" style="
        device-width;
    ">
</pre>

或者在您的文档的<head> 部分添加特定的元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

此外，如果它不起作用，请在样式表 css 中添加以下内容：

@-ms-viewport{ width: device-width; }

【讨论】：