1

这是我的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 以及 如何使用 CSS 作为浏览器宽度/高度动态调整图像大小变化？ 以及 如何在css中动态调整图像大小？

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

4

1 回答 1

1

它确实调整大小，这是小提琴，http://jsfiddle.net/TCdsK/

你使用的是什么浏览器？我试过了mozilla and chrome。

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

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

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

于 2013-07-14T05:22:50.090 回答