What I'm trying to achieve: Have images in blog posts take the full width of a blog post, and keep image proportional. Aka, a portrait image will end up being bigger than landscape.

The challenge, I'm not using images from my wordpress server, but from smugmug. Hense, I'm using embed images like this one (just drop the link in a post written in html, not wysiwyg) http://nickpelletier.smugmug.com/Category/From-nickpelletiercom/21943413_P6Mzn6#!i=1750174498&k=5SsSHBq&lb=1&s=A

I tried through settings here: Settings -> Media -> Embeds and leaving a blank value for width. This worked for landscape images, but not for portrait images. Portrait images were still using the height making the resulting width different for any picture with a different size ratio.

I tried many template (including ten eleven) and all have the same problem. Hence, I think this is how Wordpress is actually made to work.

This being said, I'm looking for how I can change this behavior in the code (template if possible, wordpress if worst case).

I'm a programmer by day doing backend code. I'll probably be ok with the code part, but I have no clue of php, wordpress (this is my first blog I'm setting up) and am fairly new to web\html. Any clue of where to look first would be appreciated.

--Edit Here is a page with a portrait image (first from smugmug, second from flickr) http://nickpelletier.com/2012/03/19/alphonse-et-dorimene-desjardins/

The current value in setting -> Media -> Embeds are width:nothing and height:1500

I would have liked the image to go to max width of column instead of having a height of 1500


this is what should work for you based on the link you provided in your edited answer:

.postcontent img {
  height: auto;
  width: 630px;

and that can go in your custom.css file. Make sure to clear your cache and refresh after making the change.

  • make sure to remove the max-width line – Charles Mar 24 '12 at 5:51

If I'm understanding this correctly, you are using Wordpress auto-embed to insert images into your posts. If that's the case, then Wordpress outputs the image code like you would code an image into a template:

<img src="http://example.com/image.jpg">

So, you could use CSS to set the image width to 100% and the height to auto:

#article img {
 width: 100%;
 height: auto;

This would make all images the full width of your post area and the height would remain proportionate to the width.

Make sure to change the div id in the above example to the div of whatever your theme wraps your post content in.

If the 100% doesn't work for whatever reason, you can use the pixel width of your post content area.

#article img {
 width: 600px;
 height: auto;
  • It seems that it does more than just adding a reference. Here is the code in the html source '<img src="nickpelletier.smugmug.com/Category/From-nickpelletiercom/…" alt="" width="1000" height="1500" />' – Babouchk Mar 24 '12 at 1:23
  • Also, I can try the css change you mention, but which one? I tried custom.css, but nothing changed. – Babouchk Mar 24 '12 at 1:26
  • see if you can add the !important tag: #article img {width:100% !important; height:auto;} – Charles Mar 24 '12 at 5:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.