How to maintain image aspect ratio in WordPress?

Question

CMS

Images from previews are displayed strongly distorted if the preview field and the image itself do not match in proportion.
Screenshot : habrastorage.org/files/954/e4a/ac6/954e4aac6ec94d3...
Here inform.kharkov.ua
It is displayed like this:

echo '<div class="spec"><a class="spec-img" href="'.get_permalink().'">'.get_the_post_thumbnail($page->ID, 'thumbnail').'</a><div class="spec-title"><a href="'.get_permalink().'">'.get_the_title().'</a></div></div><div class="its">';

I would gladly do instead of displaying images - displaying a div block of the required size with a background-katinka and everything would be ok.
But I don't know how to get the image link as a variable.
Or what are the solutions in my situation?

Answer 1

No need to connect all sorts of BFI_thumb, TinThumb and other heresy, I beg you! WP has native tools!
Get image url:

<?php wp_get_attachment_image_src( $attachment_id, $size, $icon ); ?>

where $size is either the name of the size (medium, large), or an array of two numbers - height and width
. At the output, get an array:

[0] => url
[1] => width
[2] => height
[3] => boolean: true if $url is a resized image, false if it is the original.

codex.wordpress.org/Function_Reference/wp_get_attach...

Answer 2

Either BFI_thumb or set the size of the image block and overflow:hidden
UPD:
or register new preview sizes using add_image_size( $name, $width, $height, $crop )