將導入的圖片縮放到圖片框html

-1

我有一個頁面，用戶可以在其中上傳那些將用作其個人資料圖片的圖片。我進口它在PHP和HTML使用此代碼：將導入的圖片縮放到圖片框html

$data = mysqli_fetch_assoc; 
$image = $data['image'];

和HTML

<img src = "./imgs/<?php echo $image; ?>" style = "height:200px; width:200px;>

唯一的問題是，一些圖片誰實際上不是一種「方形的大小」會看在圖像框中大大拉伸。如何讓圖像框顯示圖像的原始「方向」，例如，在顯示5x10圖像（100px x 200px）時，我怎樣才能不讓它自動拉伸到10x10方向？

來源

2017-04-25 Dranreb

您使用了內嵌樣式明確地將圖像的高度和寬度設置爲200px。

我建議你讓瀏覽器自動爲你計算高度，只設置寬度爲200px（這將使高度爲auto）。

如果你想保持不拉伸/壓扁的圖像的正方形圖像，你應該使用的容器與背景圖像，像這樣：

HTML：

<div class="profile-image"></div>

CSS：

.profile-image { 
    background-image: url('image/url/image.png'); 
    background-size: cover; 
    background-position: center; 
}

當然，你會做得很好，以確保圖像之間的某種標準化，例如，通過強制執行最大寬度，高度或寬高比時用戶上傳它。

來源

2017-04-25 11:40:31

您不必指定圖像大小，因此，如果您希望所有圖像採取一切寬度你可以應用width: 100%和不指定height，將全自動計算

來源

2017-04-25 11:38:03

您使用的術語「方向」錯誤。方向建議圖片是「風景」（x值大於y值），「肖像」（y值大於x值）或平方（兩個軸的大小相同）。

你正在尋找的是一個圖像容器，它總是一個正方形（1：1），並且內部的圖像不會伸展。

您可以通過將圖像作爲background-image通過CSS應用，併爲其指定background-size: cover來實現此類行爲。這將適合容器內的圖像，裁剪任何一邊的額外像素。

HTML示例：

<div class="container"></div>

CSS：

.container { 
    width: 250px; 
    height: 250px; 
    background-image: url('/path-to-image/image.png'); 
    background-size: cover; 
}

可以設置如果進口內聯一個<style>元素內的CSS形成PHP代碼並使用$image變量的方法：

<?php 
    $image = $data['image']; 
?> 
<style> 
    .container { 
    width: 250px; 
    height: 250px; 
    background-image: url('<?= $image ?>'); 
    background-size: cover; 
    } 
</style>

來源

2017-04-25 11:45:24 Narxx

將導入的圖片縮放到圖片框html

回答

相關問題