请问代码片段能否让图片高度或宽度超过窗口时自适应窗口？

/* 编辑器图片设置默认高度、限制最大高度 CSS片段 */
.protyle-wysiwyg [data-node-id] .img:not([style]) span:nth-child(2):not([style~="width:"]) img:not([style~="height:"]):not([style~="width:"]) {
    height: 200px; /* 默认高度 */
    max-width: 100%; /* 避免宽度太大溢出段落块 */
    object-fit: contain; /* 保持长宽比 */
}
.protyle-wysiwyg [data-node-id] .img img {
    max-height: 80vh; /* 最大高度 */
    object-fit: contain;
}

谢谢。

但是这跟图片居中有冲突。大图不溢出了，但是不能居中。取消图片居中代码后，小图不居中了，大图竟然不用居中代码就可以居中！

用这个网页可以发现两段代码的冲突：

阿里发布千问史上最大模型 Qwen3-Max，Scaling Law 还有效吗？ - 知乎

/* 图片居中，不影响图文混排 */
.p:has(span.img) { 
    margin-left: auto;
    margin-right: auto;
}

这个问题避免不了，应该不是靠 CSS 能解决的

我修改了一下，用这下边这段代码解决了：

/* 图片限高限宽居中 */

.p:has(span.img) { 
    /* 图片居中 */
    margin-left: auto;
    margin-right: auto;
    /* 最大宽度为容器的100%，防止图片超出容器宽度 */
    max-width: 100%;
}

/* 图片最大显示高度 */
.protyle-wysiwyg [data-node-id] .img:not([style]) img:not([style~="height:"]):not([style~="width:"]) {
    max-height: 800px;
    object-fit: contain; /* 保持长宽比 */
}

我改的代码不能跟随图片容器的缩放，找 AI 调了一下，最终版：

🎯 为什么 display: inline-block 有效？

• display: block - 会占用整行宽度，即使内容很小
• display: inline-block - 只占用内容实际需要的宽度和高度
• 这样容器就不会有多余的上下空间，紧贴图片边缘

/* 图片限高限宽居中 */
.protyle-wysiwyg [data-node-id] .img img {
    max-width: 100% !important;
    max-height: 800px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 关键：让容器更紧凑，只包裹图片内容 */
.protyle-wysiwyg [data-node-id] .img {
    width: 100% !important;
    text-align: center !important;
  
    /* 这是解决问题的关键代码 */
    display: inline-block !important; /* 替代 block，只占用内容所需空间 */
    height: auto !important;          /* 高度自适应内容 */
  
    /* 清除边距 */
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}