Wie macht man das volle Bild responsiv? (keine Skala/Strecke)

Also ich habe über responsive Design gelernt, und scheint ziemlich einfach. Eines jedoch verstehe ich nicht. Ich habe ein großes Bild mit voller Breite in der Mitte meiner Homepage. Es hat eine bestimmte Größe und CSS scheint die Größe in Pixel zu erfordern - wenn ich% eintippe, wird es nicht angezeigt.Wie macht man das volle Bild responsiv? (keine Skala/Strecke)

So jetzt habe ich

.picture-main { 
    /*background-color: gray;*/ 
    background-image: url("./images/homepage_main_picture.png"); 
    background-repeat: no-repeat; 

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

    padding-right: 0; 
    margin-right: 0; 
    padding-left: 0; 
    margin-left: 0; 
    width: 100%; 
    height: 250px; 
}

Allerdings, wenn ich die Größe meines Browserfenster, um zu prüfen Ansprechbarkeit ändern, wird es skaliert nur & strecken sie entsprechend und das Bild wird verzerrt, suchen schrecklich . Hat jemand eine Lösung?

PS: Beachten Sie, dass andere Antworten hier auf Stackoverflow meine Frage nicht beantworten, oder zumindest so glaube ich. z.B. this one here, die auch betitelt ist "how-to-make-a-volle Breite Image-responsive". - Vielleicht habe ich meine Frage dann falsch formuliert?

Quelle

2016-11-23 George Welder

Verwenden Sie einfach 'background-size: cover;' und nicht ';;' in CSS –

Warum markieren Sie dies als Duplikat, wenn ich explizit darauf hinweise, dass ich das hier und die Frage nicht gefunden habe verknüpft mit ist anders? Der Doppelgänger ; war ein Fehler in meinem Stack-Overflow-Post, nicht im Code. Die Abdeckung in Hintergrundgröße behebt nicht das Problem, das es dehnt und sieht seltsam aus, abhängig von der Größe des Browserfensters. –

Tut mir leid, scheint mir etwas zu verpassen. Wiedereröffnet ... –

Versuchen Sie background-size: contain; auf diese Weise das Hintergrundbild wird seine Proportionen beibehalten.

.picture-main { 
 
    background: url("//placehold.it/500x300/cf5") no-repeat 50%; 
 
    padding: 0; margin: 0; 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 

 
.contain{ 
 
    background-size: contain; 
 
} 
 
.cover{ 
 
    background-size: cover; 
 
}

Example using background-size: contain 
 
<div class="picture-main contain"></div> 
 

 
Example using background-size: cover 
 
<div class="picture-main cover"></div>

Quelle

2016-11-23 23:34:21

vielen Dank für den Versuch, mir zu helfen! Ich habe es gerade versucht, aber das entfernt die volle Breite des Bildes. also habe ich jetzt auf jeder Seite Grenzen. –

Ein Weg, um dies zu realisieren wäre, die Höhe des Elements als das Verhältnis von Breite zu setzen.

z.B .:

1), um die Breite des Elements beträgt 100% des Darstellungsbreite.

2) Wenn das Originalbild halb so groß wie breit ist, können Sie die Höhe des Elements auf die Hälfte der Breite des Ansichtsfensters einstellen.

1 vw = 1 Prozent der Viewport-Breite. 50vw = 50% der Breite des Darstellungsbereichs.

Dadurch erhält das Element die richtige Größe und Proportionen. "Hintergrundgröße: Cover;" wird dann sicherstellen, dass der Hintergrund es ausfüllt.

Quelle

2016-11-24 18:08:52

Wie macht man das volle Bild responsiv? (keine Skala/Strecke)

Antwort

Verwandte Themen