Zoom und Maßstab css background image

Question

Ich möchte das Schloss vergrößern und verkleinern, wenn der Bildschirm kleiner wird. Wenn ich eine feste Höhe einstelle, wird der Hintergrund deformiert. Was kann ich versuchen? 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; 
} 

Dank!

Answer 1

Sie definieren Hintergrundeigenschaften, aber Sie haben keinen Hintergrund, Sie haben ein Bild. Sie können einen kleinen Trick mit Sicht machen:

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

Ihre editierten Geige:

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

Answer 2

Hier ist eine andere Lösung, wenn Sie stattdessen das Image-Tag verwenden von einem Hintergrund. Das Bild wird beim Hover mit der Eigenschaft transform skaliert. Der Behälter hat einen Überlauf versteckt und beschneidet das Bild.

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

Ich verzweigte Ihre JSFiddle. https://jsfiddle.net/tgLhevrd/1/