【问题标题】:Scaling images CSS缩放图像 CSS
【发布时间】:2013-06-02 06:35:25
【问题描述】:

我使用的是 Nivo 滑块,所有图像的“高度/宽度”都是相同的 766x400,但在 Firefox 中查看滑块时,它会将所有内容放大到 1,333 像素 × 696 像素。

有趣的是,当您在浏览器中进行分屏时,一切看起来都很好,但全屏时一切都被炸毁了。

我想知道应该使用什么 CSS 代码来解决这个问题

我会发布我的整个“代码”,但图片与我的业务相关,我不太确定。

谢谢

【问题讨论】:

  • 您可以使用虚拟/临时图像以确保安全,其他人希望看到您所做的代码
  • 嗨,谢谢,我刚刚用 Nivo 滑块中的演示图像替换了我的原始图像。

标签: css image slider nivo-slider


【解决方案1】:

这可能是由 Nivo Slider 设置的内联样式引起的,但很难通过示例 CSS/标记来判断原因可能是什么。

但是,响应式图像的基础是确保width(或者,通常最好是max-width)设置为100%,并且height 设置为auto。如果有内联 CSS 会覆盖您自己的 CSS,那么您可能需要将 !important 添加到这些规则中,或者编辑 Nivo Slider 的插件文件并删除内联样式的打印。

所以基本上,试试这个(但你可能想使用更具体的选择器,你不应该使用!important,除非它是绝对必要的):

img {
    max-width: 100% !important;
    height: auto !important;
}

【讨论】:

  • 您好,感谢您的回复,我如何将代码发送给您?我试图在这里发布它,但 stackoverflow 不允许它。
  • 把它放在一个 jsfiddle 或类似的东西上并链接到它。
  • 我从来没有见过这样的程序,甚至不知道如何将东西链接到你自己 Nils。如果我可以通过电子邮件发送详细的代码,那将是最好的,我的企业电子邮件是 info@sos-boardz.com 我个人认为使用堆栈溢出并不难。
猜你喜欢
  • 2021-05-01
  • 2013-01-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-11-09
  • 2011-10-14
相关资源
最近更新 更多