Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #13570

    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.

    #79739

    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.

    #79740

    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.

    #79741

    Hi!

    Try to add following code to css/custom.css:

    a.nounderline{
    max-width: 100% !important;
    }

    Best regards,

    Peter

    #79742

    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.

    #79743

    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

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Placing an Image on a Page (not a Blog Post)’ is closed to new replies.