JS怎麼阻止圖片拉伸自適應-js教程-PHP中文網

首頁

web前端

js教程

JS怎麼阻止圖片拉伸自適應

php中世界最好的语言

Apr 13, 2018 pm 02:11 PM

javascript 伸展

這次帶給大家JS怎麼阻止圖片拉伸自適應，JS阻止圖片拉伸自適應的注意事項有哪些，以下就是實戰案例，一起來看一下。

前言

# 相信大家在日常的web開發中，作為前端經常會遇到處理圖片拉伸問題的情況。

例如banner、圖文列表、頭像等所有和用戶或客戶自主操作圖片上傳的地方，而一旦牽扯圖片，就會涉及到圖片拉伸的問題，當然，在圖片上傳時做手動裁切，讓用戶或客戶清晰的感知到圖片的有效內容才是最優的解決方案，但是在其他各種外在因素下，沒有做裁切的話，就需要在前端顯示上做處理了，滿足在上傳任意大小圖片的情況下，最優顯示效果的需求。

把圖片放進框框，要幾個步驟？三個步驟...我們開始

第一步：先畫個框框（這裡順便安麗一種自適應框框的方法）

// 假定需要一个在750px屏幕下宽400px，高280px的盒子
// 宽度 = 400 / 750 = 0.5333
// 高度 = 280 / 400 * 0.5333 = 0.3733
<style>
 .img-box{
  position: relative;
  width: 53.33%;
  height: 0;
  padding-bottom: 37.33%;
  overflow: hidden;
  background-color: #eee;
 }
</style>
<body>
 <p id="list">
  <p class="img-box">
   <img src="..."/>
  </p>
 </p>
</body>

登入後複製

第二步：設定圖片需要使用到的css

<style>
 .width{
  position: absolute !important;
  width: 100% !important;
  min-height: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  display: block;
 }
 .height{
  position: absolute !important;
  height: 100% !important;
  min-width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  -o-transform: translateX(-50%) !important;
  display: block;
 }
</style>

登入後複製

第三步：js取得圖片高度比較並為img新增類別名稱

//需要注意的是，不能在css中直接给img设置宽度和高度
//否则在img.onload后获取的宽高是css设置的宽高
//同时建议使用dom对象来获取img标签
<script>
 var list = document.getElementById('list');
 getImgWH ( list );
 //执行宽高比对并设置img类名
 function getImgWH ( Obj ) {
  var img = Obj.getElementsByTagName('img');
  for( var i=0 ; i<img.length ; i++ ){
   img[i].onload = function(){
    var width = this.width;
    var height = this.height;
    if ( width > height ) {
     this.classList.add('height');
    } else if ( width < height ) {
     this.classList.add(&#39;width&#39;);
    } else {
     this.style.width = &#39;100%&#39;;
     this.style.height = &#39;100%&#39;;
    }
   }
  }
 }
</script>

登入後複製

圖片防止拉伸處理比較簡單，但是在實際項目中需要得到足夠的重視，一個web頁面成也圖片，敗也圖片，拉伸了圖片就等著設計師的磨嘰吧，哈哈哈哈...

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

Java教學

1659

CakePHP 教程

1416

Laravel 教程

1310

PHP教程

1258

C# 教程

1233

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

cad拉伸指令怎麼用-cad拉伸指令使用方法 Mar 06, 2024 pm 02:31 PM

很多新手小夥伴還不了解cad拉伸指令怎麼用，所以下面小編就帶來了cad拉伸指令的使用方法，有需要的小夥伴趕緊來看一下吧。第一步：開啟CAD軟體，例如要拉伸下方這個三角形，如下圖所示。第二步：在下方指令列輸入s快捷鍵指令並回車，如下圖所示。第三步：接著從右往左框選對象後回車(註：既不能低於下邊界，也不能超過上頂點，必須在需要拉伸的部位之間。)，如下圖所示。第四步：然後根據提示指定基點，如下圖所示。第五步：根據繪圖要求拉伸到指定位置並點擊即可完成拉伸，如下圖所示。上面就是小編為大家帶來的cad拉伸命

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

See all articles

JS怎麼阻止圖片拉伸自適應

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題