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?

没有运气，我已经厌倦了改变事情......太令人沮丧了，我得到的是叠加在第3列上的图像，但图像不会重新调整大小......

Answer 1

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

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

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

这是您要查找的3列布局

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

使用css无法使动态图像正常工作

1 个答案: