可伸缩图像和div与浮法

有谁知道如何调整下面的代码，使我与边界的div与它内部的图像与屏幕缩放？目前它只能缩小一点，然后它不会变小。当它停止缩放时，它仍然非常大。我喜欢它，所以人们在手机上查看它可以看到整个图像，而不会被切断。有任何想法吗？可伸缩图像和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>

来源

2014-10-10 Austin

我试过你的代码，它似乎工作。你可以发布一个jsfiddle这个问题吗？ – ncardeli 2014-10-10 13:42:28

你应该看看媒体查询 - 这篇文章（http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/）可能是一个很好的起点。 – Thyamarkos 2014-10-10 13:45:49

Max-with是你的问题。更改属性只是

width: 100%;

一切要缩放

：

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

附：为了让你的手机看起来不同于普通电脑屏幕，我建议您了解媒体查询。虽然此修复程序应按照您的要求缩放您的图片。

来源

2014-10-10 17:36:28

可伸缩图像和div与浮法

回答

相关问题