在不裁剪的情況下使圖像居中的最佳方法是什么？

Question

[！[

 .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

Answer 1

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

你甚至可以添加一個

轉換：scale（1.1）; 如果需要更多居中，請在img.pro_img選擇器內部。

Answer 2

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

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

注意使用background-position: center;

Answer 3

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

Answer 4

由於圖片的寬高比與容器不同，因此無法使其充滿容器。

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

這是一個類似的問題 ，可能會有所幫助。
嘗試DEPA解決方案

Answer 5

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

• 限制HTML中的img比例（但不建議這樣做 ）
• 在CSS中設置比例
• 使用background-size和background-image屬性。

我建議您回顧一下最后一個，因為除非您要處理一些嚴格的CMS，否則前兩個將不被廣泛使用。

這里的演示小提琴

Answer 6

試試這個插入圖片

 .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>