Html 带浮动的可缩放图像和div_Html_Css_Image_Scale

Html 带浮动的可缩放图像和div

html css image

Html 带浮动的可缩放图像和div,html,css,image,scale,Html,Css,Image,Scale,有人知道如何调整下面的代码，使我的带边框的div和其中的图像与屏幕缩放吗？目前，它只伸缩了一点点，然后就不会变小了。当它停止缩放时，它仍然相当大。我想让人们在手机上看到这张照片，就可以看到整个图像，而不会被切断。有什么想法吗 <body> <div align="center" style="width: 100%;"> <div style="float: left; border: 1px solid #999; margin-left: 40px; d

有人知道如何调整下面的代码，使我的带边框的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>


大篮子
只有7美元

最大值是您的问题。将该属性更改为

 width: 100%;

在您想要扩展的所有方面：

工作示例：

另外，为了让它在你的手机上呈现出一种与普通电脑屏幕不同的特殊方式，我建议你学习媒体查询。尽管此修复程序应该按照您要求的方式缩放图像。

我尝试了您的代码，它似乎有效。您可以发布一篇关于这个问题的JSFIDLE吗？您应该研究一下媒体查询——本文（）可能是一个很好的起点。