Derzeit arbeite ich an einer mobilen Landing Page für ein Unternehmen. Es ist ein sehr einfaches Layout, aber unter der Überschrift befindet sich ein Bild eines Produkts, das immer 100% breit ist (das Design zeigt, dass es immer von Kante zu Kante geht). Abhängig von der Breite des Bildschirms wird die Höhe des Bildes natürlich entsprechend angepasst. Ich habe dies ursprünglich mit einem img gemacht (mit einer CSS-Breite von 100%) und es hat super funktioniert, aber ich habe festgestellt, dass ich Medienabfragen verwenden möchte, um verschiedene Bilder basierend auf verschiedenen Auflösungen zu liefern - sagen wir ein kleines, mittleres und Zum Beispiel eine große Version desselben Bildes. Ich weiß, dass Sie das img src nicht mit CSS ändern können, also dachte ich, ich sollte einen CSS-Hintergrund für das Bild verwenden, im Gegensatz zu einem img-Tag im HTML.

Ich kann nicht scheinen, dieses Arbeiten richtig zu erhalten, da das div mit dem Hintergrundbild eine Breite und eine Höhe benötigt, um den Hintergrund zu zeigen. Ich kann natürlich 'width: 100%' verwenden, aber was verwende ich für die Höhe? Ich kann eine zufällige feste Höhe wie 150px eingeben und dann die oberen 150px des Bildes sehen, aber dies ist nicht die Lösung, da es keine feste Höhe gibt. Ich hatte ein Theaterstück und fand heraus, dass ich, sobald es eine Höhe (getestet mit 150 Pixel) gibt, "Hintergrundgröße: 100%" verwenden kann, um das Bild richtig in das Div zu passen. Ich kann das neuere CSS3 für dieses Projekt verwenden, da es ausschließlich auf Mobilgeräte ausgerichtet ist.

Ich habe unten ein grobes Beispiel hinzugefügt. Bitte entschuldigen Sie die Inline-Stile, aber ich wollte ein einfaches Beispiel geben, um meine Frage ein wenig klarer zu machen.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Muss ich dem Container div möglicherweise eine prozentuale Höhe geben, die sich auf die gesamte Seite bezieht, oder sehe ich das völlig falsch?

Denken Sie auch, dass CSS-Hintergründe der beste Weg sind, dies zu tun? Möglicherweise gibt es eine Technik, die je nach Geräte- / Bildschirmbreite verschiedene img-Tags bedient. Die Grundidee ist, dass die Landingpage-Vorlage mehrmals mit verschiedenen Produktbildern verwendet wird. Ich muss also sicherstellen, dass ich diese so gut wie möglich entwickle.

Ich entschuldige mich, dass dies ein wenig langwierig ist, aber ich bin von einem Projekt zum nächsten hin und her, also möchte ich dieses kleine Ding erledigen. Vielen Dank im Voraus für Ihre Zeit, es wird sehr geschätzt. Grüße