Meine Bannerbilder werden nicht korrekt angezeigt. Ich habe ein scrollendes Banner in meinem index.html Dokument mit drei rotierenden Bildern. Ich habe versucht, die 3 Bilder zu einem standardisierten 1920px x 800px vorzuspannen. Nur eines der Bilder scheint korrekt angezeigt zu werden. Die anderen 2 lassen Raum auf der rechten Seite und 1 wird auch unten nicht korrekt angezeigt. Wie Sie sehen, habe ich sogar Werbebuchungsattribute, um die Breite (data-image-width='1920'
) und die Höhe (data-image-height='800'
) zu steuern. Bannerbild zeigt nicht die richtige Größe an
Wenn Sie die Maus über das Bild, um es die Größe als 1440 × 600 Pixel gibt (Natural: 1920 × 800 Pixel) auf allen drei. Ich habe auch css in meiner styles.css-Datei, um die Haupt-baner-Klasse zu steuern, unter der die Bilder liegen.
.main-baner {position: relative; float: left; width: 100%; margin-top: 50px; height: 600px;}
.main-baner img {width: 100%; height: auto;}
Haben Sie eine Idee, warum die Bilder nicht als Standardgröße angezeigt werden?
Ihr Code ** sollte ** Ihre Bilder korrekt behandeln, aber damit wir genau herausfinden können, was das Problem verursacht, aktualisieren Sie bitte Ihre Frage so, dass sie den relevanten Code in einem [minimal, vollständig und überprüfbar anzeigt Beispiel] (http://stackoverflow.com/help/mcve). Weitere Informationen finden Sie im [Hilfeartikel] (http://stackoverflow.com/help/how-to-ask), um zu erfahren, wie Sie gute Fragen stellen können. –
Sparen Sie sich den Ärger und drehen Sie das 'img' Element in ein' div' mit 'background-image: url (URL einfügen); Hintergrundgröße: Cover'. Das Bild füllt sich so groß wie möglich, ohne zu quetschen. – Skylark