跨不同分辨率的圖像大小問題

我有一個兩部分標題。左側20％擁有圖片（我們的徽標），右側80％是導航等。跨不同分辨率的圖像大小問題

標題本身及其任一部分的寬度用百分比表示。高度用em表示。這導致流暢的佈局。唯一有問題的地方就是標識 - 因爲它與容器尺寸不一樣，因此它會在某些分辨率下完美匹配，擠壓得太小而在其他分辨率上被迫上升。

應用於圖像的唯一CSS是容器內的寬度和邊距。

無論分辨率如何，我怎樣才能確保徽標填滿整個容器？

2011-05-11 AKor

您也會給徽標設置一個百分比寬度（可能100％填充容器）。請記住，在這樣做的時候，你會受到瀏覽器的圖像縮放能力的束縛，在某些情況下可能會產生不太理想的結果。這就是說，它聽起來像是用兩個完全不同的變量進行縮放：基於視口寬度的水平縮放以及基於字體大小設置的垂直縮放。雖然我讚賞您的靈活性目標，但可能需要重新考慮擴大徽標本身的需求。並非頁面上的所有內容都需要擴展。

來源

2011-05-11 02:42:15

圖像已經有百分比寬度。你是說我應該讓頭部有一個絕對的像素高度和寬度？或者我應該把它做成一個百分比高度（根據我的經驗，這很難合作）？ – AKor 2011-05-11 02:46:24

您正在不成比例地調整高度和寬度。因此，我看不出用CSS單獨擴展徽標圖像的簡單方法。您可以使用JS ...獲取容器的高度和寬度，然後根據容器的高寬比計算圖像應該處於什麼比例以適合最佳尺寸。但是，對於看起來更像是視覺設計問題的人來說，這看起來像是許多複雜的技術。 – 2011-05-11 02:56:20

作爲最簡單的解決方案，您會提出什麼建議？ – AKor 2011-05-11 03:16:47

您可能需要考慮在您的圖片或其容器中添加最小寬度，以確保它僅在某種程度上「受到擠壓」。

來源

2011-05-11 03:13:49 kei

跨不同分辨率的圖像大小問題

回答

相關問題