html - 无法让动态图像与 css 一起正常工作

Question

这是我的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>          

这是我的CSS

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

我一直在阅读一些教程主要是 http://www.fredparke.co.uk/blog/using-max-width-resize-images-dynamically和 How can I resize an image dynamically with CSS as the browser width/height changes?和 How to dynamically resize image in css?

不幸的是，我厌倦了改变事情......太令人沮丧了，我得到的是叠加在 column3 上的图像，但图像从未调整大小......

Answer 1

它会调整大小，这是 fiddle ，http://jsfiddle.net/TCdsK/

您使用的是什么浏览器？我在 mozilla 和 chrome 中尝试过。

还要确保你有一个大尺寸的图像，如果你有一个小图像，你的 css 不会拉伸(stretch)，这里是小图像的 fiddle http://jsfiddle.net/TCdsK/1/

这是您正在寻找的 3 列布局

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