如何在保持比例和裁剪效果的同時，僅使用HTML/CSS（即無服務器代碼）調整圖像大小。 細節：我希望將其大小調整爲指定的寬度，保持比例，並且如果高度大於指定值以將其裁剪到指定的高度？如何在保持比例的同時在純HTML/CSS中調整圖像大小？
其實，我知道如何使用一些服務器代碼，但我不想這樣做。這意味着使用不同的文件參考，並參考圖片<img src="picture.php" />。我需要在顯示它的同一頁面中處理圖像。
「困擾」我是，我必須發送圖像標題，因此頁面上的其他內容都不會顯示。
有沒有辦法做到這一點？也許從純HTML/CSS？ ：P
我做了一個這樣的功能（除了「裁剪」的東西），它只返回width="" height=""，我用它這樣<img src="image.jpg" resize("image.jpg") />，但我不明白我該怎麼做那個裁剪。 。
感謝
好的，所以我設法找到了一種方法，從HTML/CSS。整個想法就是要擺脫「extraheight」的：
<div style="width:200px;height:200px;overflow:hidden;" >
<img src="image.jpg" width="200px" height="auto">
</div>
第一我的形象被重新調整到所需的寬度（保持比例），然後給出一個固定的高度，包含股利和setting overflow to hidden使腳本只顯示圖像的所需部分。
，因爲瀏覽器依賴於它content-type標題來詮釋它無法呈現圖像和HTML在相同的文件。
HTML文檔的content-type標題通常設置爲text/html，而圖像的內容類型爲image/*（替代*爲圖像格式）。您可以將圖像數據打印到HTML文檔，但由於瀏覽器被指示將其解釋爲text/html而不是圖像，其內容將會出現亂碼。
您需要將<img>標記鏈接到您所描述的PHP文件。我不確定爲什麼這是一個問題;這是正確的方式去做。您當然可以通過在HTML中操作其尺寸來裁剪圖像，但我不建議您這樣做。
有沒有辦法在同一個文件中做到這一點？ – kmunky 2010-02-09 22:52:19
@kmunky有一種方法...如果我理解你的權利，你想內聯圖像數據。 – hurikhan77 2010-02-09 23:33:28
創建幫手，如：
<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>
所以這個助手將檢查，如果調整後的圖像已創建或創建新的。在這兩種情況下，它都會將正確的url返回給新圖像。
我認爲ImageMagick支持「調整大小以適合」和「調整大小以填充」方法，後者就是您要查找的內容。
在將img標籤寫入輸出緩衝區之前，將圖像保存到生成的建議文件名中，並讓'識別'爲您提取此圖像的寬度和高度。
如果您不想使用單獨的文件，而是希望圖像數據內聯，請嘗試使用較新的Web瀏覽器支持的data-uri method。這在html文件內嵌入了圖像的二進制數據流，因此它被嵌入。
您可以使用phpThumb來動態調整和裁剪圖像。它使用GD庫從圖像JPEG，PNG，GIF等創建縮略圖。
對於它的價值，我可以從父div中刪除樣式屬性。只需在img標籤上使用width =「200px」和height =「auto」，然後用div爲我工作。 – 2017-11-06 22:10:07