如何在保持比例的同時在純HTML / CSS中調整圖像大小？

Question

如何僅使用HTML / CSS調整圖像大小（即沒有服務器代碼），同時保持其比例並具有裁剪效果。 細節：我希望將其調整到指定的寬度，保持比例，如果高度大於指定值，則將其裁剪到指定的高度？

實際上，我知道如何使用一些服務器代碼，但我不想這樣做。 這意味着使用不同的文件引用並將圖片稱為<img src="picture.php" /> 。 我需要在顯示它的同一頁面中處理圖像。

什么“困擾”我是我必須發送圖像標題，以便頁面上沒有其他內容顯示。

有沒有辦法做那樣的事情？ 也許來自純HTML / CSS？ ：P

我創建了一個類似的東西（除了“crop”之外的東西），它只返回width="" height="" ，我就像這樣使用它<img src="image.jpg" resize("image.jpg") /> ，但我不明白我怎么能做那種作物......

謝謝

Answer 1

好的，所以我設法找到一種方法來做html / css。 整個想法是擺脫“超高”：

<div style="width:200px;height:200px;overflow:hidden;" >
   <img src="image.jpg" width="200px" height="auto">
</div>

首先，我的圖像被調整大小到所需的寬度（保持比例），然后給包含div的固定高度和setting overflow to hidden使腳本只顯示圖像的所需部分。

Answer 2

您無法在同一文件中呈現圖像和HTML，因為瀏覽器依賴其content-type標頭來解釋它。

HTML文檔的content-type標題通常設置為text/html而圖像的內容類型是image/* （替換*用於圖像格式）。 您可以將圖像數據打印到HTML文檔，但由於指示瀏覽器將其解釋為text/html而不是圖像，因此其內容將是亂碼。

您需要將<img>標記鏈接到您描述的PHP文件。 我不確定為什么這會構成一個問題; 這是正確的方法。 您當然可以通過在HTML中操縱其尺寸來裁剪圖像，但我不建議您這樣做。

Answer 3

我認為ImageMagick支持“調整大小以適應”和“調整大小以填充”方法，后者正是您正在尋找的方法。

在將img標記寫入輸出緩沖區之前，請將圖像保存到生成的建議文件名中，然后讓“識別”為您提取此圖像的寬度和高度。

如果您不想使用單獨的文件，而是希望圖像數據是內聯的，請嘗試使用較新的Web瀏覽器支持的data-uri方法。 這會在html文件中內聯圖像的二進制數據流，因此它是嵌入的。

Answer 4

您可以使用phpThumb來動態調整圖像大小和裁剪。 它使用GD庫從JPEG，PNG，GIF等圖像創建縮略圖。

Answer 5

創建幫手，如：

<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>

所以這個幫助器將檢查已經創建的已調整大小的圖像或創建新圖像。 在這兩種情況下，它都會向新圖像返回正確的URL。