我想在屏幕上的相同位置放置四个图像,居中并在引导程序.container
中,这样如果图像变大,它们就会调整大小。
目标是制作一个包含完整徽标的网站的第一页,黑色和白色。
我使用地图/区域,以便在鼠标输入事件中我可以在徽标后面显示图像,在特定的徽标下创建某种阴影(我不能通过css,因为它具有特定的形状)区域。
我的四张图片如下:
它们都具有完全相同的大小。我认为只使用.pagination-centered
对所有这些组合起来就足够了,但它不起作用。
我为所有图像尝试了以下CSS(全部嵌入单独的div中)
position:absolute;
left:50%;
top:50%;
margin-left:-157px;
margin-right:-157px;
/* half of img real size */
它运行良好但不适用于没有正确调整图像尺寸且底部条显示在屏幕中间的手机上,因为我猜测定位时不考虑图像高度。
答案 0 :(得分:0)
没关系,我发现它并且实际上感到非常愚蠢:
我只是使用多个css类,背景应用于图像本身。
在响应式设计上它不能很好地工作,因为背景没有调整大小,但我很确定我可以找到一种解决方法。如果不是,我将使用两组图像。而且由于回调是在mouseenter
事件上,所以在移动设备上它并不重要!
希望它会帮助某人