html - Logo 调整大小响应式 opencart

Question

我正在努力解决这个问题。基本上我的网站 stagstores.co.uk 是一个基于开放的商业网站，并且使用自定义主题。

我的问题是 Logo (标题)没有响应，而页面的其余部分是。

当我调整页面大小时或在移动设备中查看时，除了 Logo 之外的所有内容都会发生变化。

我希望在调整页面大小时将 Logo 更改为另一个大小的 Logo ，我查看了代码并想出了如何自动调整 Logo 的宽度，这基本上只是将其压缩到设定的宽度，但这不是我想要的公司标志部分出现。

关于如何修复它有什么建议吗？

Answer 1

您可以通过向 style.css 添加媒体查询来解决此问题

@media(max-width: 330px){
  #yourimage_id{
     width: 30px;
     height: 30px;
  }
}

只需为每个标准分辨率添加它，这样 Logo 的大小就适合正确的设备/屏幕宽度。

为了只获得公司 Logo ，将图片分成三个独立的图片可能是一个聪明的主意，因为这样可以更轻松地响应。

解决方法是将图片设置为 div 的 background-image，并使用 background-position 属性，这样您就可以得到图像的一部分想要!