CODEWITHSUNDEEP
htmlcssdynamicresize
thistleknot
thistleknot

Reputation: 1158

Can't get dynamic images to work properly with css

Here's my html

<div id="contentBox" style="margin:0px auto; width:100%">      

    <div align="left" id="column1" style="float:left; margin:0; width:37%;">
            <ul class="tmo_list">
                <strong>
          Commercial Buildings<br><br>
          Shopping Centers<br><br>
          Dumpster Pads<br><br>
          Decks & Patio<br><br>
          Store Fronts<br><br>
          Restaurants<br><br>
          Drive Ways<br><br>
          Awnings<br><br>
                </strong>
            </ul>

    </div>

    <div class="wrapper">
        <img src="images/pressurewashing.jpg"/>
    </div>


    <div align="right" id="column3" style="float:right; margin:0; width:37%;">
            <ul class="tmo_list">
                <strong>
          Office Buildings<br><br>
          Business Signs<br><br>
          Loading Docks<br><br>
          Rust Removal<br><br>
          Wood Fences<br><br>
          Gas Stations<br><br>
          Bus Stops<br><br>
          Homes<br><br>
                </strong>
            </ul>

    </div>
</div>

Here's my css

.wrapper img {
display: inline-block;
max-width: 100%;
height: auto;
width: auto;
}

I've been reading a few tutorial's mainly http://www.fredparke.co.uk/blog/using-max-width-resize-images-dynamically and How can I resize an image dynamically with CSS as the browser width/height changes? and How to dynamically resize image in css?

with no luck, I'm tired of changing things... so frustrating, what I get is the image superimposed over column3, but never does the image resize...

Upvotes: 1

Views: 424

Answers (1)

user2580076
user2580076

Reputation: 577

It does resize, Here is the fiddle, http://jsfiddle.net/TCdsK/

What browser are you using? I tried in mozilla and chrome.

Also make sure you have a large sized image, If you have a small image, your css wont stretch, here is the fiddle with the small image http://jsfiddle.net/TCdsK/1/

here is the 3 column layout you are looking for

http://jsfiddle.net/TCdsK/3/

Upvotes: 1

Related Questions