要求:
div 中一张图片,需要让这张图片的中心部分始置于这个div的中间。两边超出部分隐藏。
代码实现:
div{
img {
margin-left: 50%; /*相对父元素*/
transform:translateX(-50%);/* 相对自身宽*/
}
}
button 定位到一张图片上
当设计给的是一张大图,上面的按钮不能通过CSS实现,只能使用设计给的图时,这时需要在这张大图上进行链接button的定位。
方法:不要做背景,对图片进行切割,从按钮的上边部分进行切割,上面的部分成为一个 img 标签,下面的部分成为一个img,这样对 button 进行定位的时候始终设置 top 值为0。
单位的选择:使用百分比肯定是不行的,当页面变大或者变小的时候,或者是页面缩放的时候必然会出现定位不准的问题。
所以当 top 值设置为0后,只需要设置左右的距离就行。首先先将按钮居中,这很好实现。
如果有多个按钮,那么先将他们居中,再通过一个固定的 margin-left/right 值(前提:图片不会进行缩放,始终显示中间的部分。如果图片宽度会进行缩放,那么只能使用百分比定位)进行相对定位,这样在页面缩放或者变大变小的时候页面定位不会乱。
TODO:纯 CSS2 的方式实现图片的居中
https://aiezu.com/article/img_overflow_center_css_js.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.demo-box { position:relative; width:200px;height:200px; overflow:hidden;}
.demo-box p { position:absolute;top:50%;left:50%;margin:0;padding:0; }
.demo-box img { position:absolute;top:-50%;left:-50%;display:block; } // 相对父元素,但是父元素和自己宽高一致。这里其实相对于自己
.demo-box img.hide { visibility:hidden;position:static; }
</style>
</head>
<body>
<div class="demo-box">
<p>
<img class="hide" src="images/400x200.jpg"/>// 撑开p标签,使得和图片具有相同宽高,但是不显示
<img src="images/400x200.jpg"/>
</p>
</div>
</body>
</html>