[英]Zoom and scale css background image
屏幕变小时,我想缩放并缩放城堡。 如果将高度设置为固定值,则背景会变形。 我可以尝试什么? JSFIDDLE
<div class="background_cover">
<img src="http://www.cdtl.fr/wp-content/uploads/2015/04/Walt_disney_pictures.jpg">
</div>
.background_cover img {
height: auto;
min-width: 100%;
width: 100%;
background-attachment: scroll;
background-size: cover;
background-repeat: repeat;
}
谢谢!
您正在定义背景属性,但是您没有背景,但是有图像。 您可以通过可视性制造一些技巧:
.background_cover { background-image: url(http://www.cdtl.fr/wp-content/uploads/2015/04/Walt_disney_pictures.jpg); background-attachment: scroll; background-size: cover; background-repeat: repeat; } .background_cover img { visibility: hidden; width: 100%; height: auto; }
<div class="background_cover"> <img src="http://www.cdtl.fr/wp-content/uploads/2015/04/Walt_disney_pictures.jpg"> </div>
查看您编辑过的小提琴:
如果您必须使用image标签而不是背景,这是另一种解决方案。 图像使用transform属性在悬停时缩放。 容器已隐藏溢出并裁剪图像。
.background_cover {
overflow:hidden;
}
.background_cover img:hover {
transform: scale(1.1);
}
我分叉了您的JSFiddle。 https://jsfiddle.net/tgLhevrd/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.