I am trying to align images next to text, but am having issues with the image sizing. I will be putting many rows of images next to text, so I need the images to all be the same size.
When I try to insert the image it will get distorted or cut off.
I am also hoping whatever changes made will look OK on mobile as well.
Any tips?
<div>
<p style="float: left; padding-right: 50px;"><img src="https://blog.proven.com/wp-content/uploads/IND.jpg" height="200px" width="300px" border="1px"></p>
<p><p align="right"><strong><font size="4">Proven Rating: <font color="#0077b3">★★★★★</font></font></strong></p>
Indeed is a widely used job board with over 200 million visitors a month, in 60 different countries. They post millions of job listings from other job boards, newspaper classifieds, personal ads, and more.</p>
</div>
Rather than inline size attributes, use CSS to set a maximum width on the image. This eliminates forced stretch.
img {
max-width: 300px;
}