縮放和縮放CSS背景圖片

Question

屏幕變小時，我想縮放並縮放城堡。 如果將高度設置為固定值，則背景會變形。 我可以嘗試什么？ 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;
}

謝謝！

Answer 1

您正在定義背景屬性，但是您沒有背景，但是有圖像。 您可以通過可視性制造一些技巧：

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

查看您編輯過的小提琴：

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

Answer 2

如果您必須使用image標簽而不是背景，這是另一種解決方案。 圖像使用transform屬性在懸停時縮放。 容器已隱藏溢出並裁剪圖像。

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

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