Bildbreite/-höhe als Attribut oder in CSS?

Was ist der "richtige" semantische Weg, Bildhöhe und -breite anzugeben? In CSS ...Bildbreite/-höhe als Attribut oder in CSS?

width:15px;

oder Inline ...

<img width="15"

CSS scheint der richtige Ort für visuelle Informationen zu sein. Auf der anderen Seite würden wenige argumentieren, dass das Bild "src" nicht als ein Attribut spezifiziert werden sollte und die Höhe/Breite scheint mit den binären Bilddaten verbunden zu sein, wie es "src" ist.

(Ja, ich merke, aus technischen, Endbenutzerperspektive dies wirklich keine Rolle spielt.)

Quelle

2009-03-12 Wayne Kao

möglich Duplikat (http://stackoverflow.com/questions/1247685/should-i -specify-height-und-width-attributes-for-my-imgs-in-html) – lulalala

Es sollte inline definiert werden. Wenn Sie das img-Tag verwenden, sollte dieses Bild einen semantischen Wert für den Inhalt haben, weshalb das Attribut alt für die Validierung erforderlich ist.

Wenn das Bild Teil des Layouts oder der Vorlage sein soll, sollten Sie ein anderes Tag als das img-Tag verwenden und das Bild als CSS-Hintergrund dem Element zuweisen. In diesem Fall hat das Bild keine semantische Bedeutung und erfordert daher nicht das alt-Attribut. Ich bin ziemlich sicher, dass die meisten Bildschirmleser nicht einmal wissen würden, dass ein CSS-Bild existiert.

Quelle

2009-03-12 19:58:48 VirtuosiMedia

Ah ja, genau die richtige Antwort. Img-Tags dienen zur Information, CSS Hintergründe sind für das Layout. –

bezieht sich diese Frage nicht speziell auf das Breitenattribut und nicht auf das eigentliche Bild selbst? – rutherford

+18

Weder die Frage noch die Antwort scheinen den Begriff des semantischen HTML zu verstehen. Höhe und Breite sind Präsentationsattribute, unabhängig davon, wo Sie sie platzieren. Für die Semantik legen wir fest, was das Bild für den Inhalt des alt-Tags bedeutet. Ich erinnere mich nicht, warum es so wichtig war, Breite/Höhe im HTML zu haben, aber ich vermute, dass es für den Fall, dass Sie Browser ohne CSS-Rendering getroffen haben. Es ist kein Semantik-Problem. Wenn überhaupt, wird die Trennung von Bedenken bis zu einem gewissen Grad verhindert. –

Wenn es Teil Ihrer Website-Vorlage ist, ich hat es in der CSS-Datei platzieren würde.

Wenn es nur auf einer Seite ist, sollte es inline sein (oder oben in einem Block mit seitenspezifischem CSS definiert).

Quelle

2009-03-12 19:49:24

Ich würde sagen, CSS.

HTML ist über Inhalt,
CSS ist über Präsentation.

Quelle

2009-03-12 20:12:00 stevenvh

Das Problem ist, dass das Bild Inhalt ist, wie es Informationen anzuzeigen ist. Die Nicht-Präsentationsattribute des Inhalts sind immer noch Inhalt. –

@Evan - "wie man es anzeigt, ist Information". Ich stimme nicht zu. Informationen hängen nicht davon ab, wie sie dargestellt werden. Unabhängig davon, ob Sie eine Reihe von Zahlen als Diagramm oder als Liste anzeigen, sind die Zahlen (d. H. Die Informationen) immer noch dieselben. – stevenvh

Alles kann reduziert werden, um Nummer zu sein. Sie möchten nicht, dass Ihr Bild als Zahl gerendert wird, da die Daten nichts anderes als ein Bild beschreiben. Es ist nicht präsentativ im Sinne der normalen html/css-Teilung, um die Daten als Bild zu identifizieren. * * hier ist ein semantisches Markup. Ebenso wenig wäre es falsch, etwas über die hinter dem Bild liegenden Daten zu sagen, etwa die native Breite und Höhe. Ich würde argumentieren, dass es genauso gut ist, das zu tun, als "Alt" -Informationen über das Bild anzuzeigen: Sie sind beide Meta-Daten über das native Bild, ohne Kontext und Anzeige. –

Ich nehme an, dass es Teil des Inhalts ist, wie Sie erwähnt haben, so wie das Attribut src auch ist.

Auf der anderen Seite gibt es keine wirkliche Notwendigkeit, Breite oder Höhe in HTML oder CSS angeben, obwohl es Ihre Seite schneller Rendern helfen könnte.

Quelle

2009-03-13 11:11:22 spiral

Ich würde sagen HTML.

Die Attribute width und height werden verwendet, um zu verhindern, dass die Seite unzusammenhängend geladen und vergrößert wird.

Wenn Sie schon einmal einen Textblock auf einer Seite gelesen haben, um ihn dank des oben abgebildeten Ladebildes nach unten zu schieben, wissen Sie, wie frustrierend es ist!
Hinzufügen einer ID zu jedem Bild, nur um seine Breite und Höhe anzugeben, wäre lächerlich und fast so unordentlich wie das Hinzufügen der beiden Breite/Höhe Attribute sowieso.

Der Haken ist Firefox nicht die Breite und Höhe Attribute verwenden, um die Bilder Platz zu reservieren, aber ich bin überrascht, sie haben es tatsächlich nicht aktualisiert.

Quelle

2011-03-01 21:48:45 Christo

Ich könnte mich irren, und wenn ich bin, bitte, korrigieren Sie mich ... aber ich denke, Google und einige andere Suchmaschinen indizieren den Inhalt von Alt-Tags.

Manchmal habe ich für Designästhetik ein Bild von Text erstellt, der mit Schriftarten erstellt wurde, die nicht über HTML verfügbar sind, aber für Photoshop, Illustrator usw. verfügbar sind.Wenn Sie einen präzisen typografischen Eindruck haben, den Sie mit Textinformationen erstellen möchten, können Sie nur ein Bild des typografischen Textes erstellen und den eigentlichen Text für Suchmaschinen in ein Alt-Tag einfügen.

Wenn jemand eine bessere Lösung hat, würde ich es gerne hören.

In Anbetracht der Notwendigkeit für das, was ich beschrieben habe, scheint es mir vernünftig zu sein, für HTML-Inline-Höhe/Breite-Parameter, zusammen mit alternativen Textbeschreibungen, zu stimmen. Es ist in der Tat Inhalt, nicht nur Design in solchen Fällen - und solche Fälle sollten wirklich keine Ausnahmen von der Regel sein, bis CSS und Suchmaschinen eine bessere Lösung finden.

Quelle

2011-03-31 02:06:22

Willst du argumentieren, dass das Attribut 'width' des Tags' img' in Google indexiert? – vladr

Während Sie auf einen möglichen Grund eingehen, warum man die genaue Größe eines Bildes explizit angeben möchte, beantworten Sie nicht wirklich die Frage (wie/wo Sie die Größe eines Bildes angeben, als HTML-Attribute in einer CSS-Regel). – stakx

P.S. Heutzutage scheinen Web-Fonts (über CSS3 '@ font-face'-Regeln) die vorzuziehende Lösung zu sein (über vorgerenderten Text als ein Bild), um Text in einer bestimmten Schriftart darzustellen, die möglicherweise nicht auf einem Client-Rechner vorhanden ist. – stakx

Die Höhe und Breite sollte im HTML enthalten sein. Der Grund dafür ist, dass es den Abstand auf der Seite erstellt. Wenn aus irgendeinem Grund der IMG nicht geladen werden kann (und Sie waren ein guter Junge und enthalten eine alt..der Browser zeigt diesen Rahmen (mit den w und h zur Verfügung gestellt) mit der alt innen.

Die wichtigsten Vorteile Grund dafür ist das Verhindern des "Pop" -Effekts. Wenn ein Browser die Seite lädt, dauert es manchmal länger, dass größere Aspekte wie img geladen werden. Wenn Sie w und h im HTML nicht angegeben haben, wird der Browser diesen Bereich vorübergehend ausblenden Dann, wenn es schließlich lädt, kommt alles an die richtige Stelle.

Dies ist besonders ärgerlich, aber immer noch ziemlich nervig auf einem Computer, weil Sie auf einen Link klicken und plötzlich die Seite schaltet nach unten und Sie haben hat versehentlich auf den falschen Link geklickt

Quelle

2012-08-08 08:42:55 Matt

Und man kann es auch als ** inline css ** setzen, damit es nicht von einer externen CSS-Datei überschrieben wird. – lulalala

WebKit-Browser reservieren auch den Platz bei der Verwendung von CSS. Firefox wird immer ein 404-Bild (mit Attribut und/oder mit CSS) zusammenfassen. – Teemoh

Ich denke, das hängt davon ab, wie Sie das Attribut verwenden. Wenn Sie mehrere Bilder innerhalb einer Liste oder Tabelle so anordnen, dass sie richtig auslegen, setzen Sie die Breite/Höhe in Ihre CSS, um die Notwendigkeit zu vermeiden, einen weiteren Satz von Tags zu jedem Bild in der Liste hinzuzufügen. Verwenden Sie so etwas wie

ul.gallery img: { width:117px; }

Auf der anderen Seite, wenn Sie ein Bild in einen Inhalt einfügen und es muss eine bestimmte Größe sein, um das Dokument richtig fließen zu lassen, setzen Sie es dann in dem HTML. Auf diese Weise müssen Sie das Stylesheet nicht für jedes andere Bild im HTML-Format auffrischen. Wenn Sie also den Inhalt in ein anderes Bild ändern und das Bild alle zusammen entfernen, haben Sie keine Reste von Code in Ihrem CSS verstreut, die Sie nicht löschen könnten.

Quelle

2012-12-01 05:28:24 muns

Wenn Sie die HTML5-Spezifikation betrachten, die Höhe und Breite angibt, ist eine Option keine Voraussetzung. Der Code ist daher mit oder ohne diese Attribute gültig.

Aus praktischen Gesichtspunkten ist es sehr wünschenswert, sie zu spezifizieren, um Seitenumflusungen wie oben erwähnt zu verhindern. Jedoch, diejenigen, die darauf hindeuten, dass es im HTML-Format enthalten sein sollte, fehlen die Tatsache, dass Browser CSS verwenden, wenn sie die Seite anfänglich erstellen. Wenn dies nicht der Fall wäre, müsste die Seite für Floated-Elemente, festgelegte Abstände, Ränder usw. neu gezeichnet werden.

Ob in html oder css angegeben wird, wird am besten nach individuellen Umständen beurteilt. Eine große Anzahl von Bildern derselben Größe würde wahrscheinlich am besten mit css, einem einzelnen Bild mit html, bedient werden. Das heißt, wenn Sie andere Stile für das Bild angeben (Rahmenfarbe, Stil oder Radius, Float usw.), wäre es sinnvoll, dem CSS Breite & Höhe hinzuzufügen.

Wenn Sie in HTML angeben, können Sie nur Pixel verwenden. Wenn Sie in Prozent angeben möchten, müssten Sie CSS verwenden.

Wir empfehlen, ems &% anstelle von px zu verwenden, um Probleme zu vermeiden, wenn Benutzer die Browsereinstellungen usw. ändern usw. Die Bilder werden jedoch immer in Pixeln angegeben. Offensichtlich gibt es praktische Gründe für die Verwendung von px für Bilder. Bilder in px zu behalten, scheint jedoch das Argument zu negieren, sie nicht zu verwenden.

Quelle

2013-06-27 19:37:26 user2529544

Wie behandeln E-Mail-Clients Img-Einschränkungen als Attribute oder Inline-Stile?

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >

https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >

https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >

https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >

https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared

So sollten img Größenbeschränkungen nicht mit Inline-Stilen festgelegt werden, hauptsächlich weil Outlook 2007/2010/2013 sie nicht berücksichtigt.

Was passiert, wenn sowohl Attribute als auch Inline-Stile verwendet werden? Einige Kunden verwenden eine oder die andere, und einige verwenden, um die Inline-Breite in Kombination mit dem Attribut Höhe:

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >

https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared

TLDR: Verwenden Sie img Attribute für HTML-E-Mail.

Quelle

2015-03-30 21:55:47

Ich würde wi (d) th W3C Empfehlung gehen.

Das heißt, die Definition der Breite und Höhe als Attribut wie folgt aus:

<img src="example.png" width="150" height="150" alt="example image">

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

Quelle

2015-04-05 21:18:22

Per der <img> article at MDN zeigen die HTML-Attribute die intrinsische Abmessungen des Bildes, das heißt seine reale Maße. Deshalb erlaubt HTML5, obwohl HTML 4 auch Prozentwerte erlaubt, nur px-Werte. (Allgemeiner Fehler: Das "px" sollte nicht geschrieben werden)

Wenn Sie das Bild mit diesen Dimensionen anzeigen möchten, ist die Arbeit erledigt. Andernfalls müssen Sie auch CSS hinzufügen, um die Anzeige Größe anzugeben.

Natürlich ist es besser, das Bild in der angezeigten Größe zu liefern, um eine Größenänderung des Browsers zu vermeiden, Bandbreite zu sparen usw., aber das ist nicht immer möglich.

Siehe auch die Antworten auf diese Frage: [? I Höhe angeben Soll und Breite Attribute für meine IMGs in HTML] What's the difference between HTML's and CSS's width attribute?

Quelle

2017-06-04 01:23:14

Bildbreite/-höhe als Attribut oder in CSS?

Antwort

Verwandte Themen