Question

CSS叠层的问题图标叠在图片的右下角；如果能解决我能加分（10分）跪求大神帮忙啊

有两张图片，一张是大图 ，一张是放大的图标，小图标需要在大图片的右下角，
1个难点：大图片的宽不是定死的，是灵活的，可大可小
2个难点：因为在手机上显示，大图片的分辨率有坑能大于手机分辨率所以设置了
img { max-width:100%;}
3个难点：大图片需要居中
4最好不能用javascript，因为这个是编辑手动编写的，然后经过java 程序做进一步的处理，很难使用javascript，绝大多数情况下是多张这样的图片，很难使用。
图片效果是这样的（下图是时光网，的手机客户端中使用的效果，在时光网精选中能看到）

Answer 1

<div style="width:100%; position:relative;">
<img src="XXX" width="100%" /> <!--这是大图-->

<img src="XXX" style="position:absolute; right:0; bottom:0;"> <!--这是小图-->

</div>

追问

只能这样吗？感觉不对啊，对于高分辨率的手机图片岂不是很尴尬哦。图片变成这样。有什么更好一点的办法啊。谢谢大神，我原本是想吧图片放大一个div中的，让div的大小和大图的大小一样，但是第一个问题是图片大小不一，我使用了3个div ，然后就怎么也居中不了，求大神指教。

追答

这样要是还不行就要用js来计算了
text-align:center;可以让大图水平居中
padding:10px 0;让大图和背景有些空

追问

这样还是不行啊，如果用js 的话我就更不知道怎么办了，
我们的流程是这样的：
编辑编辑图片，（X张），加文字，经过后台处理需要后图片上加放大小图标
图片一多js 就很难去完成了，最好是CSS完成这样的事情，
我看时光网手机客户端的图片就是可以这样实现的（我上传的图片就是时光网手机客户端），但是我不知道这么去查看他的样式

追答

没帮上忙，汗！

Answer 2

<div style="width:100%; text-align:center;"">
<div style="position:relative; text-align:center; width:500px; height:500px; margin:0 auto;" >
<img style="margin:0 auto;width:500px; height:500px; " scr="1.jpg" >
<div style="position:absolute; bottom:0; right:0; ">
<img style="margin:0 auto;" scr="1.jpg" width="200" height="200">
</div>
</div>
</div>

追问

如果是定宽定高就不问了，这种我也会的，还是要谢谢你

Answer 3

很简单的问题，给图片增加一个容器标签，设置为 position:relative ，放大镜设置为position:absolute; right:0 bottom:0

追问

什么容器标签啊，我是过div 但是不能居中的；有什么容器标签可以居中，求大神解答，或者给个例子，如果可以的话，我加分，谢谢大神指导啊