Wie macht man ein Bild nicht scrollen?

Question

Ich würde gerne wissen, wie man ein Bild nicht mit dem Rest der Seite scrollen. Ich möchte jedoch, dass das Bild einen bestimmten Prozentsatz der Breite hat, und der Browser berechnet automatisch die Höhe, um das Bild anzuzeigen, und die automatisch konfigurierte Bildhöhe bestimmt auch die Höhe des Elternteils.

Der folgende Code ermöglicht es mir schön den Bildbereich, schön und Größe das eigentliche Bild zu positionieren:

.popPictureParent { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
.popPicture { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.popPicture img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="popPictureParent" id="picture1"> 
 
    <div class="popPicture"> 
 
    <img src="./files/painting_scene_smaller.png" alt="painting scene" /> 
 
    </div> 
 
</div>

Wie würde ich das Bild machen nicht auf dieser Website ähnlich sccroll: https://www.thediyjoint.com/ aber habe die Bildgröße und positioniere die divs wie ich es gerade habe? Ich habe andere Dinge auf der Website, dass es nicht stören darf, das ist nicht das einzige Ding, also.

Ich habe das Hintergrundbild-Ding versucht, mit festen, absoluten, aber keine Arbeit. Ich benötige den Browser, um etwas Mathe zu machen, um das Bild auf der Basis eines gegebenen Breitenprozentsatzes gut aussehen zu lassen.

Wenn ich den Hintergrund versuche, gibt es keine Option, um die div-Breite des Elternteils auf den Hintergrund einzustellen. Das ist sehr verworren für mich. Wenn mehr Informationen benötigt werden, bitte Kommentar.

EDIT: die Sache ist, ich brauche das Bild als Breite und Höhe Platzhalter dienen, so dass die Eltern div Größen zu ihm. Das Hintergrundbild gibt keinen Platzhalter. Außerdem muss das Bild nicht außerhalb des übergeordneten divs angezeigt werden. Hier

Answer 1

ist eine Lösung:

.popPicture{ 
    background-image: url('./files/painting_scene_smaller.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    } 

Answer 2

Sie würden verwenden, haben die Eigenschaft background-attachment

festen Dieses Schlüsselwort bedeutet, dass der Hintergrund in Bezug auf fixiert ist die Ansichtsfenster. Selbst wenn ein Element einen Bildlaufmechanismus hat, bewegt sich ein 'fixierter' Hintergrund nicht mit dem Element.

Anstatt den img-Tag zu dem HTML-Code hinzufügen, verwenden Sie CSS Hintergrund-Bild auf die Wrapper-Klasse in diesem Fall hinzufügen .popPicture

Zum Beispiel:

.popPicture{ 
    background-image: url('/files/painting_scene_smaller.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 

Sie können mehr lesen über diese Eigenschaft hier: https://developer.mozilla.org/en/docs/Web/CSS/background-attachment

Darüber hinaus können Sie abhängig von Ihrem Anwendungsfall die Hintergrundgröße-Eigenschaft

0 anpassen

Die Hintergrundgröße CSS-Eigenschaft gibt die Größe des Hintergrunds Bilder an. Die Größe des Bildes kann vollständig eingeschränkt werden oder nur teilweise, um sein intrinsisches Verhältnis zu bewahren.