WebSite X5Help Center

 
Marion S.
Marion S.
User

Änderung der Bildgröße verhindern  de

Автор: Marion S.
Просмотрено 242, Подписчики 1, Размещенный 0  

Meine im letzten Projekt eingefügten Bilder haben die Maße 1000x722 - nach dem Upload bleiben davon nur 671x484.

Die Bildoptimierung steht auf keine.

Wie kann ich diese Änderung verhindern?

Размещено
19 Ответы
Andreas S.
Andreas S.
Moderator

Gar nicht, weil das Bild auf die Website angepasst wird sonst würde das Bild entweder abgeschnitten oder reicht über den Seitenrand hinaus.

Читать больше
Размещено От Andreas S.
Marion S.
Marion S.
User
Автор

"Gar nicht" heißt in dem Fall - wenn ich möchte, dass im Hintergrund trotzdem die große Datei bestehen bleibt, muss ich die Bilder als html-Objekte einbinden bzw. mein Layout so ändern, dass das Bild-Objekt über die ganze  Rasterbreite geht?

Als Erklärung warum ich das möchte, ich schreibe eine Website mit DIY Anleitungen und nicht wenige Leser merken sich meine Bilder auf Pinterest - Pinterest hat ihre Darstellung auf eine Mindestbreite von 1000px optimiert - die durch die Website verkleinerten Bilder werden dann unscharf dargestellt.

Читать больше
Размещено От Marion S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

(It > De) ... Wenn du den LINK der Seite postest, könnten wir einige Auswertungen vornehmen.
... Normalerweise behält das Bild seine Abmessungen, wenn die Hostzelle größer als das Bild ist.
... Wenn die Zeile beispielsweise 1200 Pixel breit ist und das Bild 1000x500 Pixel groß ist, bleibt es bei 1000x500 Pixel.
... Umgekehrt: Wenn die Hostzelle kleiner als das Bild ist, beispielsweise 800 Pixel breit, wird die Größe des vorherigen Bilds angepasst, um in die Zelle zu passen. Dabei wird von den Abmessungen 800x400 Pixel ausgegangen.
... Wenn du das Bild in seiner ursprünglichen Größe und Auflösung anzeigen möchtest, kannst du es mithilfe der verfügbaren Optionen mit dem Originalbild verbinden, indem du es in der Showbox oder in einem neuen Fenster anzeigst...

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Marion S.
Marion S.
User
Автор

Warum die Bild-Datei verkleinert wird, habe ich verstanden. Deshalb ja auch die Nachfrage, ob html eine Lösung ist oder nur das Bild-Objekt auf die Layout-Breite zu erweitern. 

Es geht wie schon beschrieben nicht direkt um die Anzeige auf meiner Seite, sondern darum, dass das Bild an Pinterest nicht mit der Verkleinerung weitergereicht wird. Ein Showbox-Fenster ist keine Option.

Ist es ein Nachteil, die Bilder über html-Objekte einzubinden?

Читать больше
Размещено От Marion S.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DE

Normalerweise werden Bilder (fast immer) mit HTML-Code in den Quelltext eingebunden, so dass es für Broswer und externe Dienste keinen Unterschied machen sollte, ob Bildobjekt oder HTML Code.

Читать больше
Размещено От Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Marion S.
... ... ... Es geht wie schon beschrieben nicht direkt um die Anzeige auf meiner Seite, sondern darum, dass das Bild an Pinterest nicht mit der Verkleinerung weitergereicht wird. Ein Showbox-Fenster ist keine Option. ... ... ...

... vielleicht habe ich Ihr Anliegen nicht richtig verstanden ...
... Sie können weiterhin die tatsächliche URL der Bilder verwenden, wie in den Optionen vorgesehen ...
... oder Sie können das elementare <IMG>-Tag im HTML-Codeobjekt mit der URL des tatsächlichen Bildes im SRC-Attribut verwenden ...
... ohne LINK können Sie keine Auswertungen durchführen, um das Problem zu verstehen, und müssen möglicherweise auf die MITARBEITER warten, die eine mögliche Lösung vorschlagen können...

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Marion S.
Marion S.
User
Автор

Danke an alle Antworter ツ 

Ich werde dann wohl zukünftig das html-Objekt nutzen und deshalb wäre es nett, wenn ich noch ein kurzes Feedback zum Code aus meiner letzten Frage bekomme

https://helpcenter.websitex5.com/ru/post/271968?

Читать больше
Размещено От Marion S.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DE

Der CSS- und HTML-Code am Ende des verlinkten Posts dürfte das Programm nicht durcheinander bringen, soweit ich das mit meinen HTML- und CSS-Grundkenntnissen sehen kann.

Wenn der eigene Code einen Fehler enthält, ist es in der Vorschau und auf der Webseite zu sehen.

Читать больше
Размещено От Daniel W.
Marion S.
Marion S.
User
Автор

Ich habe diesen CSS Code in den Head meiner Testseite (nicht oline) eingefügt. 

<style type="text/css">

   .bild img {

     max-width: 100%;

     height: auto;

     display: block;

     margin: 0 auto;

   }

   .bilder-zentriert-flex {

     display: flex;

     justify-content: center; 

     gap: 5px;

     flex-wrap: nowrap;

   }

   .bilder-zentriert-flex img {

     max-width: 100%;

     height: auto;

     display: block;

     flex-basis: 0;

     flex-grow: 1;

   }

</style>

Ziel ist, dass die Bilder, die ich in html-Objekten auf der Seite eingefügt habe, nicht beim Upload verkleinert werden (funktioniert) und dass ich auch zwei bzw. drei Bilder ohne Umbruch nebeneinander anzeigen kann. Letzteres funktioniert bei zwei Bildern, die zusätzlichen einen Externen-Link haben, aber nicht bei einfachen Bilderlinks.

Was kann/muss ich ändern?

Читать больше
Размещено От Marion S.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DE

Wenn die Bilder nicht verkleinert werden sollen, dann die Bilder manuell hochladen, entweder mit einem separaten FTP-Programm wie z.B. FileZilla oder über das FTP-Fenster in WebSite X5.

-----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DE

Die großen Bilder werden dann per CSS-Code verkleinert auf dem Bildschirm angezeigt.

Читать больше
Размещено От Daniel W.
Marion S.
Marion S.
User
Автор

Danke fürs Antworten - ich nutze nicht den automatischen Upload, sondern gefühlt schon immer für alle Dateien, einschließlich der Bilder File Zilla. 

Beim Arbeiten an der Seite lade ich bereits die im HTML genutzten Bilder in die Projektdatei. Das Programm arbeitet also mit meinen Vorgaben, aber die Verkleinerung funktioniert mit dem CSS nicht. 

Читать больше
Размещено От Marion S.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DE

Da ich nur geringer CSS-Kennnisse habe ich einfach mal die KI nach Code für 3 Bilder nebeneinander gefragt und dieses Beispiel damit erstellt, siehe

>> https://findelinks.de/123test-aufklappmenue-2/kontakt.html

Im verlinkten Beispiel werden 3 Bilder nebeneinander dargestellt, auch bei schmalen Bildschirmen.

.

----- Antwort der KI -----

Um drei Bilder nebeneinander zu platzieren, kann man entweder Flexbox oder CSS Grid verwenden. Flexbox ist eine gute Option für einfache Layouts und responsive Design, während CSS Grid flexibler ist und auch komplexere Layouts ermöglicht.

Hier ist ein Beispiel mit Flexbox:

HTML-Code

   <div class="image-container">    <img src="image1.jpg" alt="Bild 1">    <img src="image2.jpg" alt="Bild 2">    <img src="image3.jpg" alt="Bild 3">   </div>

CSS-Code

   .image-container img {
      width: 30%; /* Oder eine andere geeignete Breite */
      /* Optional: */
      /* height: auto; */ /* Passt die Höhe automatisch an */
      /* margin-right: 10px; */ /* Fügt etwas Abstand zwischen den Bildern hinzu */
      }

----- Mein verwendeter CSS-Code (habe height und margin-right aktiviert) -----

Читать больше
Размещено От Daniel W.
Marion S.
Marion S.
User
Автор

Danke nochmal für ihre Bemühungen. Und Überraschung auch mein Code ist im Austausch mit einer KI entstanden. Aber wenn ich, das richtig verstanden habe, definiert das CSS nicht nur das Layout eines Objektes - wenn ich den Wert auf 30% stelle würde auch in Objekten mit zwei Bildern, die Bilder in der 30% Größe dargestellt.

Читать больше
Размещено От Marion S.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DE

Ich habe bei meiner Testseite das HTML-Code-Objekt kopiert und bei der Kopie das 3. Bild entfernt, aber den CSS-Code unverändert gelassen.

Die 2 Bilder haben dieselbe Größe wie mit 3 Bildern - siehe Link in meinem Post oben.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DE

Ich habe jetzt das HTML-Code-Objekt mit den 2 Bildern kopiert und und die Breite auf 45% eingestellt, ausserdem den Class-Namen geändert, damit es die Breite von 33% für die beiden anderen HTML-Code-Objekte erhalten bleibt.

Es gibt auf der Testseite also 3 Beispiele, siehe unten

-----

Читать больше
Размещено От Daniel W.
Marion S.
Marion S.
User
Автор

Danke für deine Bemühungen, ich habe mittlerweile auch das CSS für die jeweilige Anzahl der Bilder erweitert. Die Profis rollen jetzt wahrscheinlich die Augen. Aber es funktioniert ツ

Читать больше
Размещено От Marion S.
Miguel Galarza
Miguel Galarza
User
Лучший пользователь месяца EN

Hallo:


Wenn ich das richtig verstanden habe, soll das Bild beim Herunterladen die gleiche Größe wie das Original haben. Wenn Sie es jedoch in Ihre Vorlage einbetten, wird es beim Anzeigen verkleinert. Wird das Bild beim Herunterladen bereits verkleinert angezeigt?

Deshalb möchten Sie HTML- und CSS-Code verwenden.

Ich gehe folgendermaßen vor:


1) Ich lade das Originalbild in einem Ordner auf den Server hoch (im Beispiel heißt der Ordner „Covers“).
2) In einem HTML-Objekt (ohne 0px-Ränder) platziere ich diesen Code …


<img src="https://www.radiomazz.com/Portadas/RM-Encabezado-F.jpg" style='width:100%;max-width: 2048px;margin:0px;' />

Dadurch passt sich das Bild unabhängig davon, ob es sich um einen vollständigen Block (vollständig, halbvoll oder weniger) handelt, zu 100 % der Blockbreite an. Die Größe wird jedoch verkleinert, ohne die Originalgröße zu verändern. Durch Klicken auf die sekundäre Schaltfläche oder die zweite Schaltfläche können Sie das Bild in Originalgröße herunterladen. In diesem Beispiel ist das Bild 2048 x 1024 Pixel groß.

Codebeschreibung:

  • Der Tag lautet <img>.
  • Die Bildquelle lautet src=" " (Sie bearbeiten den Inhalt zwischen den Anführungszeichen mit der vollständigen Adresse des Bildes auf Ihrem Server, einschließlich der Erweiterung).
  • Der Stil (CSS) gibt die Blockbreite auf 100 % an.
  • Mit einer maximalen Anzeigebreite der Originalgröße (in meinem Beispiel 2048 Pixel) für größere Bildschirme.
  • Bei sehr großen Bildschirmen wird das Bild NICHT über 2048 Pixel hinaus vergrößert.
  • Bei kleineren Bildschirmen (in meinem Fall ist mein Bildschirm 1440 Pixel breit) wird das Bild bei der Anzeige nur auf 1440 Pixel verkleinert. Das Originalbild bleibt erhalten.

Testen Sie den Code. Sie sollten das Beispielbild sehen können, wie es auf meiner Website veröffentlicht ist.

Ich hoffe, dieser einfache Code ist genau das Richtige für Sie.


Viele Grüße.

Читать больше
Размещено От Miguel Galarza
Marion S.
Marion S.
User
Автор

Danke für Ihre ausführliche Erklärung, ich nutze einen ähnlichen Code (mit title und alt) und lade die Dateien auch selber auf den Server. Der Code hat bei mir aber nur für einzelne Bilder funktioniert, die dann beim Größenwechsel in die nächste Zeile rutschen. Für Bilder, bei denen ich das nicht möchte, hilft jetzt das CSS ツ

Читать больше
Размещено От Marion S.