| CSS | 您所在的位置：网站首页 › 当鼠标放在图片上图片会放大 › CSS |
CSS
|
1、让背景图片填满DIV 应用background-size属性可以设置背景图片填满整个div，background-size取值及解释如下： （1）background-size:cover MDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图部分看不见。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，图片左、右、顶或底部会被裁剪） 示例： .case { background-repeat: no-repeat; background-size: cover; background-image: url('~static/images/bg1.jpg'); }
（2）background-size:contain MDN文档解释说明：缩放背景图片以完全装入背景区，可能背景区部分空白。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，空区域填充背景色） 示例： .case { background-repeat: no-repeat; background-size: contain; background-image: url('~static/images/bg1.jpg'); }
(3）background-size:width-value,height-value; 取值为固定大小、百分比和auto三种。固定大小就是写死；auto就是以背景图片的比例缩放背景图片。 百分比的MDN文档解释说明：指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框，不能为负值。 示例： .case { background-repeat: no-repeat; background-size: 400px 300px; background-image: url('~static/images/bg1.jpg'); }
2、背景区 background-attachment: fixed 当background-attachment值为fixed的时候，背景区为浏览器可视区（即视口），不包括滚动条。 分析及总结： 假设选作背景的图片尺寸为 260×234，则宽高比为260/234 = 1.11，一div的宽高为 200×200。 分析： contain—— contain要保持宽高比将图片完全放入div中，div为 200x200。原图为 260x234，所以放入div，宽260—>200，那么高就得200/宽高比（1.11）=180，所以底部会有空白。 cover—— cover与contain完全放入相反，它要求完全覆盖。所以要覆盖就要从更小的高计算，高 234—>200，宽就等于200x1.11 = 222，因此，图片右侧会被裁剪掉一部分。 auto—— auto是原图大小放入。 3、鼠标划过元素，图片被放大 
.div{
width: 400px;
height: 400px;
overflow: hidden; /*防止图片放大后溢出div*/
}
.img{
max-width: 400px;
max-height: 400px;
transition: all 0.3s ease-out; /*ease-out 减速、慢慢结束*/
-webkit-transition: all 0.3s ease-out;
}
.div:hover .img{
z-index: 5;
transform: scale(1.5); /*把图片放大1.5倍*/
-webkit-transform: scale(1.5);
}
鼠标未移入： |
背景图片填满了div。
右侧空白，填充了背景色白色。
鼠标移入后： 
【本文地址】