css - 缩放图像 CSS

Question

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

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

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

我会发布我的整个“代码”，但图像与我的业务有关，我不太确定。

谢谢

Answer 1

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

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

所以基本上，试试这个（但你可能想使用更具体的选择器，!important除非绝对必要，否则你不应该使用）：

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