廣告輪播圖居中顯示，圖片寬度自適應，但最小為1920,輪播圖居中顯示

需求：廣告圖100%寬度，最小寬度1920，圖片居中顯示jQuery
問題：瀏覽器可視寬度小于1920時，圖片無法水平無法居中顯示
解決：img的父元素相對定位，溢出隱藏，img絕對定位，當窗口變化時，動態獲得img的寬度imgWidth，瀏覽器可視區域的寬度viewWidth，將left修改為:-(imgWidth-viewWidth)/2

imgs li img{

 width:100%;
 min-width:1920px;
 height:590px;
 position:absolute;
 /*小于1920時 圖片劇中
  left:-(1920-窗口寬度)/2
 */

}

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1贊 92
  • 不會用代碼框，所以看著有些亂套，，，，html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個帥氣的名字閱讀 1,562評論 0贊 0
  • 1、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現在，利用CSS3的Transform，...
    kiddings閱讀 3,199評論 0贊 11
  • 1. tab列表折疊效果 html: 能源系統事業部 崗位名稱： 工作地點 崗位名...
    lilyping閱讀 1,897評論 0贊 1
  • 直接使用包管理工具進行安裝 apt-get install java-1.8.0-openjdk.x86_64 解...
    zxcvbnmzsedr閱讀 136評論 0贊 0