缩放图像 CSS

Question

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

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

我想知道应该使用什么 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;
}