<div>
<div class="content wysiwyg-content">
I set my WordPress post thumbnails to max out at a certain height and width, but they're distorting every image to be exactly that height and width. (No, I'm not on IE, I know IE&lt;7 screws this up, I'll worry about that later. I'm on Firefox 3.6.) Here's my CSS:<br />
<br />
.wp-post-image {border: 1px solid black; float:right; margin:10px 40px; max-height:150px; max-width:200px;} <br />
<br />
What should I do?
</div>
</div>


I set my WordPress post thumbnails to max out at a certain height and width, but they're distorting every image to be exactly that height and width. (No, I'm not on IE, I know IE<7 screws this up, I'll worry about that later. I'm on Firefox 3.6.) Here's my CSS:

.wp-post-image {border: 1px solid black; float:right; margin:10px 40px; max-height:150px; max-width:200px;} 

What should I do?

Keep WordPress thumbnails from getting squished by max-width in CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

WordPress is a free and open-source content management system (CMS) based on PHP and MySQL for creating websites and blogs. Features include a plugin architecture, a template system and strong management, customization and search systems; through its dynamic presentation of content, webmasters have the flexibility to create websites easily.