image - ul 列表中的图像最大宽度

Question

max-width:100%将图像放置在 div 内时正在工作，但是当我将其添加到 li 时它不工作。

这是演示

但奇怪的事实是，如果我.pro ul完全删除样式，它会起作用。由于定义了 ul 的样式以完成 UI 部分，因此我无法从代码中删除任何现有样式。

PS - max-width:100% 用于仅将图像拉伸到图像原始大小的范围。width:100% 使图像适合我不想要的设备尺寸。

检查这个DEMO这就是我希望它在 ul 列表中的工作方式。您可以调整窗口大小以检查其工作方式。

Answer 1

这是你想要的吗？我对css进行了以下更改。

.pro ul{margin:0; padding:0;  list-style:none; width:100%; white-space: nowrap; overflow:hidden;}
.pro li{  display:block; margin:0; padding:0;  }
.pro li a {display:block}
.pro ul li img{     margin:0 auto; width:100%; max-width:100%}

更新：

检查这个更新的小提琴。当我检查 chrome 和 firefox 时，我得到了完全相同的输出。否则请指定您使用的浏览器。

我刚刚删除了width:100%from.pro ul li img样式

更新 2：

如果您overflow:hidden;从小提琴中的样式中删除该属性，.pro ul它将按预期工作。但是如果你没有办法编辑你的 CSS，对不起。

Answer 2

我试了一下，我想我明白了

检查这个小提琴

我在这里使用定位..

 .pro ul li img{ position:absolute;}

如果您不想使用定位，则从 ul 标记中删除width和white-space属性。（我不知道为什么，但是删除后它起作用了）

 .pro ul{margin:0; padding:0;  list-style:none; overflow:hidden;  height:243px}

检查这个小提琴