有沒有辦法動態地定義圖像在頁面或特定佈局中的顯示方式？

很多時候，我遇到了管理高度或寬度異常長的圖像的問題。有沒有辦法動態地定義圖像在頁面或特定佈局中的顯示方式？

如果我固定了它們的高度和寬度，它們會出現拉長？

如果我固定它們的寬度，並且如果圖像的高度很長，那麼它也會弄亂整個網站。

如果我固定它們的高度，並且如果圖像的寬度很長，那麼它也會弄亂整個網站。

我保存在本地驅動器中的圖像是保存在保持比例？假設用戶決定上傳圖像1（高度）* 32（寬度）。當他上傳這張圖片時，腳本會將用戶上傳圖片的大小調整爲高度：1000px（只是舉例）

所以得到的圖片在1000px（height）* 32000（widht）中，你現在看到圖片異常大。

現在在1000px * 1000px的框中顯示此圖片時，顯示此圖片的最佳方式是什麼？

來源

2010-05-17 Starx

調整大小的圖像時，應保持高寬比，使他們不沿任一方向伸出。如果你被困在某個地方，至少要發佈一些代碼，以便我們可以告訴你哪裏出了問題。 – Alec 2010-05-17 08:09:34

如果您嘗試調整32x1圖像的大小以使其適合1000x1000框，則不應將高度調整爲1000.而應將寬度調整爲1000，將高度調整爲1000/32 。

一些示例代碼可以是：

define(MAX_WIDTH, 1000); 
define(MAX_HEIGHT, 1000); 

if ($cur_width/MAX_WIDTH > $cur_height/MAX_HEIGHT) 
{ 
    $new_width = MAX_WIDTH; 
    $new_height = (int) ($cur_height * MAX_WIDTH/$cur_width); 
} 
else 
{ 
    $new_width = (int) ($cur_width * MAX_HEIGHT/$cur_height); 
    $new_height = MAX_HEIGHT; 
}

此檢查其尺寸是「大」相對於盒子的尺寸和設置$ new_width和$ new_height適當。確保處理奇怪的情況，其中一個維度舍入爲0（即10000x1圖像可能最終爲1000x0）。

來源

2010-05-17 08:41:07 Dazarath

如果我固定它們的高度和寬度，它們會顯示拉長？

如果您更改比例，它們將會失真，如果您更改大小，它們會變形。

如果我固定它們的寬度，並且如果圖像的高度很長，那麼它也會弄亂整個網站。

圖像將按比例縮放，保持其原始x-y比率。這個「弄亂網站」取決於上下文。

如果我固定它們的高度，並且如果圖像的寬度很長，那麼它也會弄亂整個網站。

同上

如何是最好的方式解決這一問題？

這取決於許多因素，其中最重要的是圖像的目的。是的，我們又回到了上下文中。

如果我讓你要實現的目標是什麼的一些假設，你基本上有兩種選擇：

裁剪圖像（可能縮放之後）
計算圖像的xy比例，比較它與你想要放置的空間的xy比率相關，用它來決定縮放它（同時保持長寬比）到空間的寬度還是空間的高度。

來源

2010-05-17 08:07:47 Quentin

誰提到使用瀏覽器來「調整」圖像？ – zaf 2010-05-17 08:19:30

嗯，我的一部分愚蠢的假設。我已經把它刪除了。儘管如此，它並沒有改變任何其他答案。 – Quentin 2010-05-17 08:28:49

是的，可能是裁剪也是一種選擇，但如果圖像的主題被裁剪掉了會怎樣。這可能聽起來不可能，但如果有辦法，請告訴我 – Starx 2010-05-17 08:35:19

如何在特定的矩形中試圖擬合（保持長寬比）輸出圖像？

來源

2010-05-17 08:08:24 zaf

這不就是Starx所問的嗎？ – Quentin 2010-05-17 08:09:36

不，他不是！他試圖固定寬度，並沒有奏效。他試圖固定身高，但沒有奏效。他沒有嘗試調整給定矩形內的圖像大小。 – zaf 2010-05-17 08:14:48

@zaf，抱歉讓我感到困惑，但我在問這個嗎？ – Starx 2010-05-17 08:26:06

如果我理解正確的話，你要保留的比率。那麼爲什麼你不使用一些圖像庫在高度或寬度上縮放圖像並保持比例。

來源

2010-05-17 08:09:03 Anton

是的，我把它們調整到一定的寬度和高度，並保持它們的比例。現在的問題是顯示它們，如果圖像很長，即使它被調整大小，它也會將其他元素推到頁面的後面。我想解決它們如何顯示在固定容器中，而不會弄亂比例或縮放它們。 – Starx 2010-05-17 08:19:40

您可以使用div和overflow: hidden;。

來源

2010-05-17 08:11:21 Grumpy

有沒有辦法動態地定義圖像在頁面或特定佈局中的顯示方式？

回答

相關問題