html - Logo 调整大小响应式 opencart

标签 html css responsive-design opencart

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

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

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

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

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

最佳答案

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

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

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

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

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

关于html - Logo 调整大小响应式 opencart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40108932/

相关文章:

javascript - 将HTML悬停在 block 元素上时运行Javascript?

html - CSS:尝试以正确的方式格式化水平菜单,但在浏览器之间不一致

javascript - 点击后滚动到顶部

javascript - IE 中元素的垂直定位(堆叠)不正确

javascript - 如何在窗口调整大小时为等高子项重新加载 div

html - 响应式设计中的图像拉伸(stretch)

javascript - 当我将 html 和正文高度设置为 100% 时,Smooth Scroll 不起作用

html - 将元素从一个多选列表新添加/删除到另一个时更改元素的背景颜色

javascript - 将垂直滚动条添加到 Google map 侧边栏

css - 如何设置背景图像响应