Wie kann das Hintergrundbild in einem Containerelement dynamisch angepasst werden?

Ich erstelle eine Webseite (mit Bootstrap) und in einem meiner Container-Tag versuche ich ein Hintergrundbild zu setzen, und ich möchte dieses Bild dynamisch an die Bildschirmgröße anpassen (ohne abgeschnitten zu werden). Ich habe den folgenden HTML- und CSS-Code verwendet.

HTML-CodeWie kann das Hintergrundbild in einem Containerelement dynamisch angepasst werden?

<!DOCTYPE html>

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!--Main stylesheet--> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 

<body> 
    <div class="container"> 
     <div class="row new-class"> 
      <div class="col-xs-12 new"> 
      </div> 
     </div> 
    </div> 
    <!--some more code here--> 
    <!-- jQuery --> 
    <script src="js/jquery.min.js"></script> 
    <!-- jQuery Easing --> 
    <script src="js/jquery.easing.1.3.js"></script> 
    <!-- Bootstrap --> 
    <script src="js/bootstrap.min.js"></script> 
    <!-- Main JS --> 
    <script src="js/main.js"></script> 
</body>

CSS

.new-class 
{max-width: 4368px;} 

.new { 
     padding-top: 63.227%; 
     height: 150.24px; 
     background-image: url("/images/9087.jpg"); 
     background-position: center; 
     background-size: cover; 
    }

Dieser Code tut das.
Aber das Problem tritt auf, wenn ich versuche, Hintergrund-Anhang als behoben, macht es das Bild groß und das Bild wird beschnitten und unscharf.
Meine ursprüngliche Bildgröße ist 4368 * 2912 px.

Quelle

2016-08-23 Umang Agrawal

Haben Sie versucht, in der Klasse neue Schreiben 'Breite: 100%; Höhe: Auto; ' –

@RamSegev Ich habe das auch versucht, aber das Problem bleibt bestehen. –

Ist Ihre Absicht, dass das Bild ein komplettes Hintergrundbild ist? Basierend auf dem Hintergrund-Anhang: behoben; Ich schätze, das ist deine Absicht? – Culyx

Ich glaube, dass Sie wollen, dass der Header ein statisches Element auf der Seite vom Klang der Dinge ist? d.h. der Header bewegt sich überhaupt nicht, wenn der Benutzer scrollt? Wenn das der Fall ist, versuchen Sie Folgendes:

html{ 
    height: 100%; 
    width: 100%; 
} 
body{ 
    height: 100%; 
} 
.container{ 
    height: 20%; 
    width: 100%; 
    position: fixed; 
    background-image: url("/images/9087.jpg"); 
    background-position: center; 
    background-size: contain; 
    background-repeat: no-repeat; 
}

Quelle

2016-08-24 13:39:33 Culyx

Bei Verwendung der obigen Lösung wird das Bild zu klein (es bedeckt nicht die gesamte Breite des Bildschirms) und wenn ich Hintergrundgröße als Abdeckung anwende, wird das Bild beschnitten. –

Die Abdeckung wird auf die maximale Bildgröße gedehnt, wobei der Inhalt nur dem Minimum von Höhe/Breite entspricht, während das Seitenverhältnis erhalten bleibt – Culyx

Wie kann das Hintergrundbild in einem Containerelement dynamisch angepasst werden?

Antwort

Verwandte Themen