Hintergrundbild in einem div immer einen bestimmten Teil des Bildes zu zeigen (skaliert und positionierte)

Ein Bild der Größe 1900 x 1080 in einem div als Hintergrund verwendet wirdHintergrundbild in einem div immer einen bestimmten Teil des Bildes zu zeigen (skaliert und positionierte)

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <style> 
     html,body { 
    height:100%; 
} 
     #imageHolder{ 
      background-size:100% auto; 
      background-image:url(img/bg2.jpg); 
      width:100%; 
      height:30%; 
     } 
    </style> 
</head> 
<body> 
    <div id="imageHolder"></div> 
</body> 
</html>

Mit meiner Bildschirmgröße 1366x768 es zeigt die komplette Bildbreite aber offensichtlich nicht die komplette Höhe. Jetzt zeigt das div einen Teil des Bildes und ich möchte, dass es genau diesen Teil des Bildes zeigt, auch wenn ich die Browsergröße ändere. Was passiert jetzt, wenn ich die Browsergröße (kleinere Breite als normal) ändere, wird das div in der Größe verändert und das Bild wird auch in der Größe verändert, aber das skalierte Bild zeigt nun Teile des Bildes, die vorher nicht sichtbar waren.

Wie bekomme ich den gleichen Teil des Bildes (nichts weniger als nichts mehr) wie ich es im maximierten Browserfenster bekomme.

Quelle

2016-12-26 Novice

Sie werden Art und Weise mit dem 'Hintergrund-position' Eigenschaft zu spielen. Standardmäßig werden Bilder oben links ausgerichtet, aber Sie können dies in etwa so ändern: '50% 50%' (Mitte/Mitte) oder '50% 100%' (Mitte/unten) usw. –

können Sie CSS-Eigenschaften gegeben unten an deine Stylesheets

background-repeat:no-repeat; 
background-size:cover;

es funktioniert fine.I'm hinzugefügt, um das Snippet hinzuzufügen.

html,body{ 
 
    height:100%; 
 
    width:100%; 
 
    } 
 
#imageHolder{ 
 
      width:100%; 
 
      height:100%; 
 
      /* background-image: url("https://i.stack.imgur.com/wwy2w.jpg"); 
 
      background-repeat:no-repeat;*/ 
 
    background: url("https://i.stack.imgur.com/wwy2w.jpg") no-repeat center center fixed; 
 
      background-size:cover; 
 
    border:1px solid #000; 
 
      
 
    }

<div id="imageHolder"></div>

Quelle

2016-12-26 15:02:58

Dieser hat die Das gleiche Problem, vor dem ich stehe, wenn Sie die Größe des Browserfensters ändern, wird mehr Bild sichtbar, das zuvor nicht sichtbar war (in voller Breite), bis ich das Browserfenster auf minimale Breite verkleinere und dann das komplette Bild angezeigt werde zeige die Teile des Bildes (die vorher nicht sichtbar waren). – Novice

@Noice jetzt überprüfen –

Nein, es funktioniert nicht. Es enthält mehr oder weniger Bild basierend auf der Größe des Fensters. Ich möchte genau dasselbe Bild zeigen. – Novice

-1

Verwendung dieses

#imageHolder{ 
      background-image:url(img/bg2.jpg); 
      width:100%; 
      height:30%; 
      background-size: cover; 
     }

Quelle

2016-12-26 15:10:10

background-repeat:no-repeat; 
background-size:cover; 
background-position: center center;

Sie mitte mit oben ersetzen können, unten, links und rechts einen genaueren Teil des Bildes zu erhalten, die Sie mögen, während der Größenänderung.

Quelle

2016-12-26 15:13:29 evilgenious448

Kann es ein spezifisches Koordinatenfenster sein? – Novice

yep, können Sie Prozentsätze oder sogar Pixel, etc. tun, wenn Sie weitere Informationen wünschen, lesen Sie hier: [link] http: //www.w3schools.com/cssref/pr_background-position.asp – evilgenious448

erstes Layout, die Sie beschreiben eine Höhe/Breite-Verhältnis von

768 Fensterhöhe * 30% Höhe = 230 Pixel (Höhe)

230 Pixel Höhe/1366 Pixel width = 0,168

Jetzt können wir für das div dieses Verhältnis mit dem Padding Trick setzen:

In diesem Layout wird immer die Oberseite des Bildes angezeigt. Dies ist, was Sie gefragt haben, wie es am Anfang standardmäßig angezeigt wird.

Gerade falls Sie einen anderen Teil des Bildes gesehen werden wollen, stellen Sie Hintergrund-Position entsprechend

html, 
 
body { 
 
    width: 100%; 
 
    margin: 0px; 
 
    
 
} 
 
#imageHolder { 
 
    background-size: 100% auto; 
 
    background-image: url(http://lorempixel.com/1900/1080); 
 
    width: 100%; 
 
    height: 0px; 
 
    padding-top: 16.86%; 
 
}

<div id="imageHolder"></div>

Quelle

2016-12-26 20:25:46 vals

Ich denke, mit Ihrer Technik bin ich nah dran zu bekommen, was ich gesucht habe. Das einzige Problem dabei ist, dass es nicht die komplette Bildbreite zeigt. Ich weiß nicht, wie, aber es sollte das Bild (das größer als die Bildschirmgröße ist) anzeigen, skaliert, um in den Bildschirm zu passen (100% Breite). – Novice

Hintergrundbild in einem div immer einen bestimmten Teil des Bildes zu zeigen (skaliert und positionierte)

Antwort

Verwandte Themen