2017-02-16 4 views
0

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. enter image description hereBannerbild 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?

+1

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. –

+0

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

Antwort

0

.center_img{
width: 100%;
}

Verwendung 100% in Ihrer Bildklasse.

+0

Das hat es. Ich hatte eine Inline 'style = 'width: 100%" in der div für das schlechte Bild, aber es wurde nicht auf die 'center_img' Klasse selbst angewendet. Danke. – jcbridwe

Verwandte Themen