I am using bootstrap and within the row class, I am printing an image. The original size of the image is 150px X 150px, but due to the surroundings of that row, its width is squeezed a little bit because of which I am getting a vertically stretched image. Is there a way to reduce the original dimensions of the image in a way so that it maintains the original proportion? Here is the code I am talking about:
<div class="row"><a href="<?php echo $post['guid'];?>"><?php echo get_the_post_thumbnail( $post['ID'],'full' ); ?></a></div>
Try using
.img-responsiveclass inside the image tag. It maintains the aspect ratio of the image in responsive case.The only solution I was successful with was reducing the size of the image that I am showing there. It turns out upon inspecting element that the block where the image is being printed is not getting enough width. I reduced the width of the image and it worked for me. Not sure if that’s the right way to do it or Bootstrap does actually provided with some class to do the job.