如何總是在一個正方形中顯示圖像

我想要在400 * 400的固定尺寸的平方內顯示圖像。因此，爲了保持縱橫比，可能的是，如果寬度更大，則寬度將會減小並且剩餘根據縱橫比的空間會填充一些背景顏色（我可以給div上的顏色）。同樣，如果高度較高，高度將根據縱橫比調整顯示，然後剩餘空間將填充背景。如何總是在一個正方形中顯示圖像

任何人都可以幫助我如何實現這一目標嗎？這可以通過imagemagick完成嗎？ http://php.net/manual/en/book.imagick.php

任何幫助，將不勝感激。

來源

2013-05-08 Jack

您是否嘗試過尋找圖像裁剪/調整教程/代碼/博客/文件？ – deceze 2013-05-08 12:56:42

是的，但無法找到哪一個可以幫助我。 – Jack 2013-05-08 12:57:20

這只是一個簡單的數學問題，如果你不熟悉數學代碼，我建議你尋找一個圖像處理庫或作物庫，可以解決你的問題。 – jtavares 2013-05-08 12:58:06

-4

您

計算圖像的長寬比
檢查圖像尺寸之一是比你的「框架」
不再如果兩者都長，那麼你選擇的最大尺寸兩個
量表畫面，使得最長的尺寸是相同的幀的（400像素）
量表另一個尺寸，以便它是400 *長寬比PX

來源

2013-05-08 12:59:58 Griffin

-5

如何創建一個<div>並設置背景圖片？

來源

2013-05-08 13:04:11

嘿，那裏。你應該解釋這將如何解決問題？ – 2015-03-07 14:24:07

@Jubobs：這是一個答案的嘗試。這可能不是一個好的答案，但它是一個嘗試。 – Makoto 2015-03-07 17:09:38

@Makoto這只是一個建議。一個誠實的答案嘗試至少會涉及一個玩具的例子來展示這個想法。還不夠好。 – Jubobs 2015-03-07 17:34:57

使用phpthumb。

require_once '/path/to/ThumbLib.inc.php'; 
    $thumb = PhpThumbFactory::create('path/to/image.jpg'); 

    //$thumb->resize(400, 400); 
    // resize image and make thumbnail by cropping image automatically 
    $thumb->adaptiveResize(400, 400)->save('/path/to/thumb.jpg'); ;

更多閱讀轉到PHPTHUMB

來源

2013-05-09 20:07:50 Notepad

嘗試增加寬度和高度這一次，你可以在CSS做到這一點：d

來源

2013-05-15 14:10:48 bozo5573

如果有合適的尺寸顯示的圖像是不夠好你不「T需要創建一個縮放版本，只是用CSS縮放網頁中：

div { 
    width:400px; 
    height:400px; 
    background:url('https://placekitten.com/400/600'); 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-position:50% 50% 
}

因人而異的S查看placekitten圖像的大小以查看圖像縮放的方式。

播放上的jsfiddle一個例子：https://jsfiddle.net/Lontevb3/1/

來源

2016-06-29 18:06:18 Kwebble

如何總是在一個正方形中顯示圖像

回答

相關問題