已解決430363個問題，去搜搜看，總會有你想問的

求問如何實現圖片在容器中居中顯示，超出部分隱藏？

關注

首頁猿問求問如何實現圖片在容器中居中顯示，...

JavaScript

繁星coding 2023-04-16 23:19:58

網頁中，想要排列一組圖片的縮略圖?，F存放圖片的容器尺寸已知（譬如50X50px），圖片縮略代碼已完成，縮略后得到的是一邊滿足長度要求一邊超出長度要求的圖片（譬如50X60px；60X50px之類）。

查看完整描述

1 回答

大話西游666

TA貢獻1817條經驗獲得超14個贊

提供幾個方法：

1. 最簡單的方法是將圖片寫到父層的background-image中，設置background-position: center;

2. 如果一定要用<img .../>的寫法，先設定父層容器overflow:hidden; 然后可以使用腳本處理圖片居中(假設父層是li)：

$('li > img').each(function(){
  $(this).css(    'margin-left' : '-' + ($(this).width() / 2) + 'px'
  )
})

反對回復 2023-04-20

關注

舉報

0/150

提交

取消