可伸縮圖像和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與浮法

回答

相關問題