缩放图像CSS

Question

我正在使用Nivo滑块，所有图像都是相同的“高度/宽度”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;
}