Verhindern Hintergrundbild von Zoomen

Ich habe ein Div mit einem Hintergrundbild. Wenn der Benutzer die Seite aus dem Browser zoomt (mithilfe der Strg-Taste & + oder Strg + Bildlauf), möchte ich das Bild nicht vergrößern. Das Bild sollte beim Zoomen unverändert bleiben. Gibt es eine Möglichkeit, dies zu tun?Verhindern Hintergrundbild von Zoomen

Dies sind die Stile des div das Hintergrundbild enthält:

.owl-slide{ 
    background-image: url('...'); 
    background-repeat: no-repeat; 
    background-position: center; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Ich weiß, dass das normale Verhalten innerhalb der Seite zu vergrößern-in alles sein würde, auch das Bild. Aber das ist eine Kundenanfrage, die gelöst werden muss, auch wenn ich damit nicht einverstanden bin.

Quelle

2017-08-23 Diana

Mögliche Duplikat [Deaktivieren Zoom auf einem div, aber erlauben Zoom auf der Seite (eine alternative div)] (https://stackoverflow.com/questions/13886763/disable-zoom -on-a-div-but-allow-Zoom-on-the-Seite-an-alternative-div) – Huelfe

Versuchen https://stackoverflow.com/questions/15233076/prevent-that-a-fixed-element-resizes -When-Zoom-on-Touchscreen – Stuart

top und left Wert für das Element und fügen Sie eine position:absolute. Stellen Sie auch die width und height.

.owl-slide { 
 
    background-image: url('http://www.freepngimg.com/download/nature/1-2-nature-png-picture.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
    position: absolute; 
 
    top:0px; 
 
    left:0px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="owl-slide">Sample div</div>

Quelle

2017-08-23 15:08:00

Vielen Dank. Aber wenn ich diese Seite heranzoome, wird das Bild aus Ihrem Beispiel ebenfalls vergrößert. das möchte ich verhindern. Ich habe auch versucht, meinen Code zu ändern, und das Bild zoomt immer noch in. – Diana

führen Sie das Snippet aus, und klicken Sie auf Vollbild. Dann Zoom versuchen –

In der Tat funktioniert es im Vollbildmodus. Vielen Dank! – Diana

vielleicht können Sie das Ansichtsfenster

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

Prost vergrößern deaktivieren.

Quelle

2017-08-23 14:50:41

Vielen Dank für Ihren Vorschlag. Aber ich muss die Seite zoombar halten - ich muss nur verhindern, dass das Bild zoomen kann. Ihr Code verhindert, dass die gesamte Seite vergrößert wird. – Diana

Verhindern Hintergrundbild von Zoomen

Antwort

Verwandte Themen