wake-up-neo.net

Wie skaliere ich ein Bild mit gleicher Breite und Höhe ohne Verzerrung?

Ich habe einen Abschnitt auf meiner Startseite, der die letzten Beiträge abfragt und den Titel und das Vorschaubild von jedem abruft. In meiner functions.php habe ich eine width und eine height für das Thumbnail angegeben:

add_image_size( 'thumbnail-small', 179, 147 );

Ich habe alle Bilder unterschiedlicher Größe in meinen Posts als vorgestellte Bilder festgelegt. Wenn sie in das Miniaturbildelement der Seite gezogen werden, werden sie proportional zugeschnitten, aber nicht auf die richtige Größe skaliert:

enter image description here

Ich habe die Bilder mit Rändern versehen, damit Sie die Skalierung sehen können, aber es scheint, als würde Wordpress sie nur so skalieren, wie es richtig passt.

Wie kann ich dafür sorgen, dass sie alle gleich aussehen, und dann einfach den Überschuss mit Überlauf herausschneiden: in CSS versteckt?

Ich habe einige CSS ausprobiert wie:

// .image-mask is the wrapping div
#middle .image-mask { width:179px; height:147px; overflow: hidden; position:relative; }
#middle img { position:absolute; display: block; top:0; left:0; }

und...

#middle img{ width: auto; max-width: 150px; height: auto; max-height: 100px; }
1
Romes

Wenn Sie möchten, dass WordPress die Bilder auf diese absoluten Bildabmessungen zuschneidet, können Sie das Argument $crop von add_image_size auf true setzen. Standardmäßig ist es false :

add_image_size( 'thumbnail-small', 179, 147, true );
5
Milo