wie mit css , html oder php bildgröße einstellen?

ich habe ne webseite auf der andere leute bilder hochladen können, diese bilder müssen letztenendes immer genau gleich groß sein, wie mach ich das mit einer der folgenden möglichkeiten?

1. Bild direkt nach upload mit php irgenwie beschneiden und quadratisch machen
2. mit css quadratisch machen sodass ein stück links und rechts fehlt
3. mit css quadratisch machen ohne dass links und rechts was fehlt sondern oben und unten ein weißer rand ist

aber das bild darf auf keinen fall verzogen sein oder so

Answer 1

[showgirl1]

Tja das kommt ja auch darauf an was auf den Bildern zu sehen ist. Wenn man da einfach was (irgendwie) wegschneidet, dass ist das Bild im Zweifel für die Tonne. Es kann mit allen deinen aufgeführten Varianten erreicht werden. Ich würde aber nicht beschneiden. Am besten du wählst die 3. Variante dann ist auch klar was von dem Bild auf der Website angezeigt wird. Ich gehe mal davon aus, dass du dazu im Internet eine passende Anleitung finden wirst.

Comments

[Mensch4]

link?

[showgirl1]

@Mensch4

">>DU!<< dazu im Internet eine passende Anleitung finden wirst"

Ich kann dir gutefrage.net empfehlen, da kannst du ja Fragen wie eine Internetrecherche funktioniert!

[Mensch4]

@showgirl1

danke, sehr hilfreich, werde mal nachschauen

Answer 2

[regex9]

Ich würde zunächst eine (JavaScript-)Bibliothek heraussuchen, die Cropping-Funktionalitäten bereits anbietet, sodass der Nutzer einen Bildausschnitt seines hochgeladenen Bildes auswählen kann.

Eine kurze Recherche hat mir beispielsweise diese Optionen ausgespuckt:

• Croppie
• Cropper.js
• jQuery Guillotine

Du kannst ja dennoch schon (auch mit JavaScript) prüfen, ob das Bildverhältnis stimmt / eine bestimmte Mindestgröße erreicht wird.

const fileReader = new FileReader();
fileReader.onload = () => {
  const image = new Image();
  image.onload = () => {
    // you can check the image size here ...
    console.log(image.width + " - " + image.height);
  };
  image.src = fileReader.result;
};
fileReader.readAsDataURL(this.files[0]);

Wenn die Daten nicht bereits beschnitten übermittelt werden, brauchst du zumindest die Informationen über den gewählten Bildausschnitt des Nutzers. Alles Weitere lässt sich mit imagecrop durchführen.

Answer 3

[Cyclops123456]

Es gibt mehrere Möglichkeiteiten, wenn du zB. einen vordefinierten Wert, nennen wir ihn FocalPoint auf X und Y Achse definierst. Kannst du in deinem Script mehrere Bildgrößen aus dem Original erstellen und damit gewährleisten, dass das wesentliche dennoch auf dem Bild bestehen bleibt.

Wenn du es einfach nur so nach Größe X/Y croppen möchtest, kann dir diese Funktion helfen.

https://www.php.net/manual/de/function.imagecrop.php

Mit CSS kannst du das Bild nicht initial Quadratisch machen, sondern nur in einem Quader anzeigen lassen in dem du den Container in dem das Bild angezeigt werden soll einen overflow: hidden gibst.

Bsp:

div {
 width: 50px;
 height: 50px;
 overflow: hidden;

 img {
  width: 100%;
  height: 100%;
 }
}

<div>
 <img src="..." />
</div> 

Alternativ gäbe es noch die Möglichkeit das Bild als Background einzufügen und dann die Background-size auf Cover/Contain zu stellen, je nach dem wie du es anzeigen lassen möchtest.