2

该图像仅在 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%
}
4

3 回答 3

2

游戏课 right : 0

像这样 

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

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

于 2012-06-26T09:39:23.587 回答
2

看到这个小提琴。它可能会帮助你。

于 2012-06-26T09:44:55.663 回答
0

这可能对将来的某人有所帮助：如果图像的父级是一个表（无论在节点树中有多高），那么 max-width 将在 FF 或 IE 中不起作用，除非您定义了特定的像素 max桌子上的宽度。然而，这在 Chrome 中运行良好。

逻辑似乎是 FF 和 IE 认为表格总是应该根据内容扩展，而不考虑 max-width: 100%。

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

于 2012-11-14T22:52:37.200 回答