So, you make text posts with embedded images to the body and for some annoying reason the images always appear to look horizontally squished (or vertically stretched if you prefer) to fit the width of your layout! It ruins the looks of your posts as well as the content itself! How do you fix this? Turns out it’s ridiculously simple!

Go to your Tumblr Customize page, (you should see it as a button in the upper-right corner of your blog page itself,) and click the “Edit HTML” button.

image

Now, you should see a huge mess of code. Don’t worry about all of this too much, we’re going to be dealing with 99.98% none of it.

What we’re going to be doing is either adding or editing one parameter of your theme’s CSS section to tell images to automatically resize their vertical dimension based on the width of their container. Thus, maintaining a constrained aspect ratio.

First thing is first, we need to check whether your layout already has the CSS entry. Within the first 1/4 of your theme’s coding, there should be a line that has the tag <style type=”text/css”>. This is the start of your CSS. The CSS ends when you find a line further down that contains </style>. Take a quick look through this section to see whether or not it contains an entry called “img” — if it does it would likely be near the beginning.

If this “img” entry already exists, we’re going to add one simple piece of code to it. Within the { } brackets following “img”, add this code (in bold) just before the closing } backet: height:auto;

If this “img” entry does not exist, we’re going to add it by making a new line between any other two entries in the CSS section. Copy and paste the following code (in bold) into that line: img {height:auto;}

*Note about the following bit: My theme thinks it’s being clever by substituting traditional greater-than / lesser-than symbols used for HTML tags with left and right arrows. Please disregard this and read them as normal greater-than/lesser-than symbols. Copying and pasting the code text will still work fine in your theme.*

If for some reason your theme HTML does NOT contain a <style> CSS section at all, we can simply create one. Search the first 1/3 of your theme’s code for the line with </head> in it. This is the end of your <head> section, and where your CSS parameters should be. So, just above the </head> line, add the following code (in bold):

<style type=”text/css”>
img {height:auto;}
</style>

Hit preview, then save! You’re all set.

So with this simple code fix, your posts can go from looking like this:

image

to this:

image

  1. lanaborg reblogged this from fox-orian and added:
    Yet again, Fox-orian saves the day. THANK YOU ;_________;!!!!!!
  2. aftercarefulconsideration reblogged this from fox-orian
  3. magikyrp reblogged this from fox-orian
  4. rebskie1 reblogged this from fox-orian
  5. ninnfeon reblogged this from fox-orian
  6. souldrift reblogged this from fox-orian
  7. uzee-sh reblogged this from fox-orian
  8. stegamoe reblogged this from fox-orian
  9. surveillance-doe reblogged this from emmitys
  10. emmitys reblogged this from fox-orian
  11. ninthorange reblogged this from fox-orian
  12. yabanned reblogged this from fox-orian
  13. nicholaskole said: It worked! You’re a genius!
  14. vyktorkun said: thank you so much :)
  15. vyktorkun reblogged this from fox-orian