Question

图像仅基于Chrome浏览器宽度进行缩放，但在IE和Mozilla Firefox中无效。 thumb img在所有浏览器中都有效但只有.play img max-width无效这是我的 HTML

<div class="contai">
        <div> <img src="1.png" style="max-width:100%" /></div>
       <div class="thumb">
         <img src="2.jpg" />
              <div class="play"> <img src="videoImagePlay.png" /></div>
       </div>
 </div>

CSS

    .contai{
    width:100%;
}
.thumb{
    border: 1px solid rgb(226, 226, 226);
   position:relative; float:left; width:38%
}
.thumb img{
    max-width:100%
}
.play{
     position:absolute; top:30%; left:35%
}
.play img{
    max-width:50%
}

Answer 1

播放课程 right : 0

就像这样

.play{     
     position:absolute; top:30%; left:35%; right:0;
}

现场演示http://jsfiddle.net/puS7u/

Answer 2

请参阅此fiddle。它可能对你有所帮助。

Answer 3

这可能有助于未来的某些人：如果图像具有作为表的父级（无论节点树中的高度如何），则除非在表上具有特定像素定义的最大宽度，否则max-width将不在FF或IE中工作。但这在Chrome中运行良好。

逻辑似乎是FF和IE认为表总是应该根据内容扩展，忽略max-width：100％。

哪个浏览器具有“正确”或最佳实现方式并不明显。

max-width在mozilla和IE中不起作用

3 个答案: