Question

当屏幕变小时，我想在城堡中进行缩放和缩放。如果我设置固定高度，背景会变形。我该怎么办？ JSFIDDLE

<span class="tiptext" tabindex="-1">
  <span class="description" style="text-align:center;">You can read more about the topic in this pop up box</span>
  Mouse over me to learn more.
</span>

谢谢！

Answer 1

您正在定义背景属性，但是您没有背景，而是拥有图像。你可以通过可见性制作一个小技巧：

＆＃13;

.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;
}

＆＃13;

<div class="background_cover">
  <img src="http://www.cdtl.fr/wp-content/uploads/2015/04/Walt_disney_pictures.jpg">
</div>

＆＃13;

查看您编辑过的小提琴：

https://jsfiddle.net/uro8x66a/1/

Answer 2

如果您必须使用图片代码而不是背景，这是另一种解决方案。图像使用transform属性在悬停时缩放。容器已隐藏溢出并裁剪图像。

.background_cover {
    overflow:hidden;
}
.background_cover img:hover {
    transform: scale(1.1); 
}

我分叉你的JSFiddle。 https://jsfiddle.net/tgLhevrd/1/

缩放和缩放css背景图像

2 个答案: