CSS中定位图片的位置是非常常见的操作,但如果需要让图片的位置保持不变,就需要特别注意了。img { position: absolute; top: 100px; left: 100px; } 上面
CSS中定位图片的位置是非常常见的操作,但如果需要让图片的位置保持不变,就需要特别注意了。
img { position: absolute; top: 100px; left: 100px; }
上面的代码将图片定位在页面的(100px, 100px)处,但如果用户缩放了页面或是在移动设备上浏览网站,图片的位置会随之改变。
为了避免这种情况,我们需要使用相对于父元素的百分比来定位图片:
.container { position: relative; width: 500px; height: 500px; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
上述代码中,我们创建了一个宽高为500px的父元素并将其定位方式设置为relative,然后使用50%的top和left值来定位图片在父元素的中心点处,并使用transform属性将图片向左和向上移动自身宽高的一半,从而保持图片在父元素中心的位置。
这样一来,无论用户如何缩放页面,图片的位置都将始终固定在父元素的中心点处。
粉丝
0
关注
0
收藏
0