Änderung der Bildgröße verhindern 
Autor: Marion S.
Visited 147,
Followers 1,
Udostępniony 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?
Posted on the
Gar nicht, weil das Bild auf die Website angepasst wird sonst würde das Bild entweder abgeschnitten oder reicht über den Seitenrand hinaus.
Autor
"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.
(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
.
Autor
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?
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.
... 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
.
Autor
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/pl/post/271968?
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.
Autor
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?
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.
-----
Die großen Bilder werden dann per CSS-Code verkleinert auf dem Bildschirm angezeigt.
Autor
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.
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) -----
Autor
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.
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.
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
-----