什麼是不裁剪中心圖像的最佳方式？

[！[什麼是不裁剪中心圖像的最佳方式？

.img_div{ 
 
     height: 150px; 
 
     width: 150px; 
 
     overflow: hidden; 
 
} 
 
img.prof_img{ 
 
     height: 100%; 
 
}

<div class='img_div'> <?php echo "<img class='prof_img' src='$location' alt=''>"; ?> </div>

什麼是中央圖像不裁剪的最佳方式？] 2] 2

來源

2017-02-06 Evaldas Stankunas

設置寬度的'.img_prof_img' – linktoahref

100％，那麼它就會被擠壓。 –

'max-width：100％，height：auto，display：block' to'.img_prof_img' – linktoahref

.img_div{ 
     height: 150px; 
     width: 150px; 
     overflow: hidden; 
} 
img.prof_img{ 
    width: 100%; 
}

你甚至可以添加一個

變換：規模（1.1）;在你的img.pro_img選擇器裏面，如果你需要將它居中更多..

來源

2017-02-06 04:27:55 kenny

我想保持身高100％並獲得保證金0的效果。 –

然後，只需給.img_div一個背景圖像：背景大小：cover;並從標記中移除圖像標記。 – kenny

你可以使用類似這樣的東西。

<div class='img_div' style="background-image: url('<?php echo $location; ?>'); background-position: center;"></div>

音符使用background-position: center;

來源

2017-02-06 04:31:14

下面是http://www.w3schools.com/cssref/pr_background-attachment.asp解決方案的鏈接 –

img.prof_img{ 
    height: 100%; 
    display:block; 
    margin:0 auto; 
}

來源

2017-02-06 05:25:12 sneha

由於畫面寬高比比容器其不可能以使其填充容器不同。

正如我在你的例子中看到的，你要顯示上傳的圖片的預覽，如果你只想顯示預覽，而不是修改它，如果它是用戶的個人資料圖片，那麼你可以不喜歡它 this，它的一個簡單的解決方案，它可能在這種情況下工作... 不會爲高圖像工作。

這是一個類似的question，可能有所幫助。
嘗試depa's solution

來源

2017-02-06 05:45:21

有幾種方法可以做到這一點。從我的頭頂。

約束img比例在HTML（但這是not advised）使用background-size與background-image財產CSS
設置比例。

因爲前兩個廣泛沒有在今天使用，我會推薦去過去的最後一個，除非你正在處理一些嚴格的CMS。

一搗鼓演示here

來源

2017-02-06 06:14:10 semuzaboi

試試這個插入圖像

.container{ 
 
width: 150px; 
 
height: 150px; 
 
float: left; 
 
background: yellow; 
 
border: solid 1px #000; 
 
text-align: center; 
 
} 
 
.container img{ 
 
max-width: 100%; 
 
max-height: 100%; 
 
margin: auto; 
 
}

<div class="container"> 
 
<img src="Untitled-2.png" alt="" title="" /> 
 
</div>

來源

2017-02-06 06:28:48

回答

相關問題