縮放正在通過數據庫導入的圖像

Question

我正在處理數據庫項目，並遇到了美化障礙。

我有加載輪廓成陣列用於使用PHP while循環顯示的數據庫，所以它被設置以顯示數據庫的內容，並允許與沒有額外的編碼增加。

領域的四個是圖片上傳地點，上傳過程的一部分，是最多上傳4個不同的圖像，然後將其保存在一個目錄和其路徑保存到配置文件數據庫的能力。

這裏是我的問題然而，並不是所有的圖像具有相同的尺寸（如寬度和高度）。我有我的代碼設置指定圖像的特定區域，以阻止它填滿屏幕，而是縮放它，代碼只是擠壓或拉伸尺寸。因此，調整大小的80 * 120圖像只是被扭曲。

這是代碼負責調用圖像進入該領域的部分。

<div id="wb_Text2" style="position:absolute;left:10px;top:<?php echo $imagepix ? >;width:100px;height:120px;z-index:5;text-align:left;"> 

<span style="color:#000000;font-family:Arial;font-size:15px;"><img src="uploads/<?php  echo $productpicture ?>" alt="" style="width:70px;height:120px;" ></span></div> 

第一部分是容器的化妝品對齊方式，第二部分導入圖像並相應地設置其格式。

我使用的樣式=節大小，但它顯然是錯誤的做法，我不能找到究竟是什麼我正在尋找的一半是知道要問什麼任何有用的信息！

最終的結果是能夠擴展的圖像通過簡單地改變在輸出域的比率，如改變風格樣式=「寬度，從而各種要求：140px;高度：240像素

我希望這是感覺和別人有一些見解。

感謝

Answer 1

你可以使用最大高度和最大寬度，而不是高度和寬度，並應用在黑色背景的圖像容器，你也必須居中圖像在容器中水平和垂直，通過設置容器的行高等於heig來實現HT和使用文本對齊。

<div id="image-container" style="width: 70px; height: 120px; text-align: center; line-height: 120px; background: black;"> 
    <img src="image.jpeg" style="max-height:120px; max-width: 70px; display: inline-block;" /> 
</div> 

當然，您應該將樣式標籤放入樣式表中。

如果你寧願裁剪圖像，而不必它適合與黑色的背景，讓我知道，因爲這也可以用CSS，也許一些JavaScript來實現。