最大高度的流暢肖像圖像

使用最大高度時，我遇到了流體圖像的一些問題。我試圖在最多450x450的盒子或任何與圖像長寬比不相同的任意框中綁定圖像。發生了什麼事是，圖像的寬度被限制爲450px，但高度不是，圖像溢出包裝div。最大高度的流暢肖像圖像

我的代碼是：

<div class="wrapper"> 
    <div class="container"> 
     <img src="http://i.imgur.com/iw4yOa0.jpg"/> 
    </div> 
</div>

看到http://jsfiddle.net/5fuZ5/爲完整的代碼和CSS。

我知道我可以通過使用jQuery實現這一點，但我需要一個不需要JavaScript的響應式解決方案。

來源

2013-04-02 Omar Jackman

你的形象被打破，所以我嘗試了一個新的形象。它可以正常縮放而不會出現任何問題，您使用的是哪種瀏覽器？ – Vector

我在窗戶上使用chrome v25.0.1364.97 m，圖像適用於我。你可以請一個jsfiddle與你的形象合作。 –

當然，這是http://jsfiddle.net/kevinPHPkevin/5fuZ5/1/ – Vector

好吧，我有類似的問題，可以找到沒有幫助。我的情況是，我有一列流暢的圖像（適合寬度爲100％的容器）適用於橫向圖像，但縱向寬度適合，因此縱向寬度很大，因此高大而瘦的圖像（縱向）寬度適合容器，從而使其體積很大。

我的解決方案是考慮容器，如果在肖像圖像的情況下，我將容器設置爲景觀容器的50％，然後當我將圖像寬度（當肖像）放到容器較小的容器時它們成比例（ish）。

所以笏你想要的是2個容器使用，一個用於縱向和橫向，景觀之一將是你想要的最大寬度，因此450px。如果所有圖像的縱橫比都是相同的，那麼現在將你的縱向容器的寬度設置爲一個寬度爲225px（寬度的一半），然後它們應該都匹配得很好，並給你一個結構化的網格 - 或者如果單列縱向圖像將會更多或更少與風景圖像一樣高。

如果你想看到這個工作（很短的時間），我會離開這個鏈接，所以你可以看到我如何解決它。這個例子是一封電子郵件（請不要呻吟，關於糟糕的編碼，它沒有完成）我製作的模板，我有一列圖像（它的響應）縱向和橫向 - 在桌子上使用一個類肖像圖像（類=肖像），但這可能很容易成爲一個div。

http://www.sink140.com/sf-test/single.html

我主要是停止思考試圖控制高度，只是控制容器，讓圖像填充它，並通過調整容器的寬度（使它更小），你自然會減少圖像的高度。

一般情況下圖像的縱橫比將確保您可以預測佈局，因爲您有排序基準 - 縱向圖像與橫向圖像相關。

希望這有助於或至少給你另一個想法。

來源

2013-04-04 16:29:20 Matt

最大高度的流暢肖像圖像

回答

相關問題