縮放圖像CSS

Question

我使用的是Nivo滑塊，所有圖像都是相同的“高度/寬度” 766x400，但是在Firefox中查看滑塊時，它會將所有內容放大到1333像素×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;
}