Placing an Image on a Page (not a Blog Post) « Support Forum | Kriesi.at

Support Forum » Sentence

Placing an Image on a Page (not a Blog Post)

6 posts from 3 voices

Started 11 months ago by outtacontext
Latest reply from Devin
This topic is closed
This topic is resolved

Tags:

outtacontext
Member
I have a series of articles I've written and am publishing them as pages. I would like to add an image with a caption to them and am wondering what is the best way to do that. I usually use this inline css:
```
<div style="margin-top: 7px; float: right; margin-bottom: 12px; margin-left: 9px; width: 300px;"><img src="http://outtacontext.com/life/images/.jpg" width="300" height="" border="0" alt="" /><br />

<p class="preface" style="margin-top: 10px; text-align: center;"></p>
</div>
```
But, I want the image to scale for different size screens. One way I thought of doing it is to create a custom css (rather than inline) and simply don't stipulate the image size.

What is your recommendation for doing this so the image will resize in the responsive web design?
Thanks.
Posted 11 months ago #
Dude
Dude
You need to use a percentage value instead of a pixel value. Eg use:
```
<div style="margin-top: 7px; float: right; margin-bottom: 12px; margin-left: 9px; width: 100%;">
<img src="http://outtacontext.com/life/images/.jpg" width="300" height="" border="0" alt="" />
</div>
```
to cover the entire content element width or decrease the percentage value if you want to float the text around the image.
Posted 11 months ago #
outtacontext
Member
This is working. Thanks.

But it brings up another problem. My old blog, which I imported into WP and this theme has a number of blog images that run the width of the old blog's content area (530 pixels wide). When I reduce the size of the window these images overflow into the right column. The two widest viewports work fine (the content area is wide enough to hold the 530px wide images).

How can I fix that so these wide images will downsize nicely? For an example take a look at the image within this blog post: http://www.outtacontext.com/wp2/2011/12/10/i_used_to_say_b/

In this example I have an image within a div. The style of the div is this:
```
#main div.image_center {margin-bottom: 12px; width: 100%; }
```
The image tag has no height or width stated in the code and the style on it is from your base.css that has max-width: 100%. Can you tell me why this isn't resizing after the two larger viewports?

Thx.
Posted 11 months ago #
Dude
Dude
Hi!

Try to add following code to css/custom.css:
```
a.nounderline{
max-width: 100% !important;
}
```
Best regards,
Peter
Posted 11 months ago #
outtacontext
Member

Dude, it worked!!! Thank you very much.

Now, can you tell me why it's working? I'd like to understand all of this. Thx.

Posted 11 months ago #
Devin
Moderator

Hi outtacontext,

Glad that is working for you. What its doing is forcing the class that link has gets a forced width so that it overrides any other width associated with the image. Using max-width defines that maximum size and then using a percentage so its liquid and adjusts.

Regards,

Devin

Posted 10 months ago #