Hilfe bei der Seite Styling

StackOverflow https://stackoverflow.com/questions/1842853

  •  12-09-2019
  •  | 
  •  

Frage

Ich habe folgendes Bild am Anfang einer Seite platziert wird. 

<body>
    <form id="form1" runat="server" >
    <div>
        <div>
            <img src="Images/top.png" width="100%" height="115px" alt="top.png" />
        </div>
    </div>
    </form>
</body>

Das Problem ist, es ein bisschen Polsterung, die nach links, oben wird erscheinen, rechts und unten im Bild. Ich will nicht, dass es Polsterung. Mit anderen Worten, ich mag das Bild oben mit links und oben auf der Seite bündig sein, und es über die Breite der Seite zu strecken. Wie kann ich das erreichen mit einem Stil?

War es hilfreich?

Lösung

Einige Standardstile Browser geben dem Körperelement eine Polsterung, und einige geben ihm eine Marge. Sie werden beide um entfernen müssen für das Bild bündig gegen die Ansichtsfenster in allen Browsern sein. 

    body { margin: 0; border: 0 }

Andere Tipps

Sie müssen CSS Reset Regeln verwenden Browser Stile zurücksetzen, dann von dort aus bauen. Ich benutze http://meyerweb.com/eric/thoughts/2007 / 05/01 / Reset-nachgeladen / 

<img style="display: block; padding: 0; margin: 0;" ... />

Allerdings, wenn seine ein Bild, das im Wesentlichen ein decoratin von somesort ist (dh. Nicht „Inhalt“ oder auf eine andere Seite verlinkt sind) i bevorzugen es als Hintergrundbild in der übergeordneten Element zu verwenden.

Zum Beispiel

    # Pseudo-Bild {Höhe: 100 Pixel; Breite: 200 Pixel; Hintergrund: transparent url (path / to / Bild) bewegen no-repeat top left;}      

Natürlich ist es auf diese Weise tun Sie Anzeige des Bildes in seiner tatsächlichen Größe begrenzt sind, und Sie haben die div auf den gleichen Dimensionen zu setzen oder größer ist.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top