Question

有没有人知道如何调整下面的代码，使我的边界div与其中的图像一起缩放屏幕？目前它只是缩放一点，然后它不会变小。当它停止缩放时，它仍然非常大。我希望它能让人们在手机上查看这个图片时能够看到整个图像而不会被切断。有什么想法吗？

<body>
<div align="center" style="width: 100%;">
    <div style="float: left; border: 1px solid #999; margin-left: 40px; display: inline-block; width:100%; max-width:308px;">

        <h2>Large Basket</h2>

            <img src="http://www.detroitdrivingrange.com/assets/images/large-basket-golf-balls.png" style="max-width: 100%;"/>

        <h1>Only $7.00</h1>

    </div>

</div>
</body>

Answer 1

Max-with是你的问题。将该属性更改为

 width: 100%;

关于您想要扩展的所有内容：

工作示例： http://jsfiddle.net/n4xr3kdd/1/

P.S。为了让您在手机上看到与普通计算机屏幕不同的特定方式，我建议您了解媒体查询。虽然此修复程序应该按照您要求的方式缩放图像。

可伸缩的图像和带浮点的div

1 个答案: