0

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>
paigeg422
  • 13
  • 1
  • 3
  • 2
    [If lacking the code that exhibits the issue, then what is included is practically worthless.](http://idownvotedbecau.se/nomcve/) – Liam Apr 19 '18 at 15:19
  • So sorry! I have added the code. Thanks for letting me know. – paigeg422 Apr 19 '18 at 15:45
  • Please extract your styles into an embedded `style` tag and eliminate extraneous markup, such as the `font` tag ([which is invalid in HTML5 anyway](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)). – isherwood Apr 19 '18 at 15:48
  • Applying a fixed width/height prevents any mobile responsiveness, and you don't need to add `px` when using these image attributes. `border` is not a supported attribute (Depreciated in HTML5) and `` is also depreciated. – Robert Apr 19 '18 at 15:49
  • Why are you nesting `p` tags, and using HTML from the 90s – Alon Eitan Apr 19 '18 at 15:50
  • Because I am super new to this and have no idea what I am doing. – paigeg422 Apr 19 '18 at 15:52
  • Be sure to follow recent guides that specify HTML5. – isherwood Apr 19 '18 at 15:53

1 Answers1

1

Rather than inline size attributes, use CSS to set a maximum width on the image. This eliminates forced stretch. 

img {
  max-width: 300px;
}

Demo

isherwood
  • 58,414
  • 16
  • 114
  • 157