css+JavaScript如何控制圖片大小的範例程式碼分享-css教學-PHP中文網

首頁

web前端

css教學

css+JavaScript如何控制圖片大小的範例程式碼分享

黄舟

Jul 26, 2017 pm 01:39 PM

css

使用js和css講圖片的現實控制在固定的區域內，大於這個區域的等比例縮放，小於這個區域的居中顯示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css+js完美控制图片大小</title> 
<script type="text/javascript" language="JavaScript"> 
<!-- 
var flag=false; 
function DrawImage(ImgD){ 
    var image=new Image(); 
    image.src=ImgD.src; 
    if(image.width>0 && image.height>0){ 
        flag=true; 
        if(image.width/image.height>= 400/400){ 
            if(image.width>400){ 
                ImgD.width=400; 
                ImgD.height=(image.height*400)/image.width; 
            }else{ 
                ImgD.width=image.width; 
                ImgD.height=image.height; 
            } 
            ImgD.alt=image.width+"x"+image.height; 
        } 
        else{ 
            if(image.height>400){ 
                ImgD.height=400; 
                ImgD.width=(image.width*400)/image.height; 
            }else{ 
                ImgD.width=image.width; 
                ImgD.height=image.height; 
            } 
            ImgD.alt=image.width+"x"+image.height; 
        } 
    } 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
* { 
    margin:0; 
    padding:0; 
} 
li { 
    list-style:none; 
} 
img { 
    border:0; 
} 
.group_head { 
width:400px; 
height:400px; 
line-height:400px; 
border:1px solid #ccc; 
overflow:hidden; 
position:relative; 
text-align:center; 
float:left; 
margin-right:10px; 
} 
.group_head p { 
position:static; 
+position:absolute; 
top:50%; 
vertical-align:middle 
} 
.group_head img { 
position:static; 
+position:relative; 
top:-50%;left:-50%; 
vertical-align:middle 
} 
--> 
</style> 
</head> 

<body> 
<ul class="jobGroup"> 
    <li><a href="http://www.jb51.net">
    <div class="group_head">
    <p>
    <img  src="/static/imghwm/default1.png"  data-src="http://www.baidu.com/img/baidu_logo.gif"  class="lazy"     style="max-width:90%"  style="max-width:90%"  onload="DrawImage(this);"/ alt="css+JavaScript如何控制圖片大小的範例程式碼分享" >
    </p>
    </div>
    </a> 
         </li> 
          
     </ul> 
</body> 
</html>

以上是css+JavaScript如何控制圖片大小的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

兩個圖像和一個API：我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM

我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此，只有一種產品之一，我們可以以不同的方式對其進行著色以顯示

每周平台新聞：第三方代碼，被動混合內容，連接最慢的國家的影響Apr 15, 2025 am 11:19 AM

在本週的綜述中，燈塔在第三方腳本上闡明了燈光，不安全的資源將在安全站點上被阻止，許多國家連接速度

託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics（廣泛使用）

它全部都在頭上：管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM

該文檔負責人可能不是網站上最迷人的部分，但是其中所處的內容對於您的網站的成功也一樣重要

JavaScript中的Super（）是什麼？Apr 15, 2025 am 10:59 AM

當您看到一些稱為super（）的JavaScript時，在子類中，您會使用super（）調用其父母的構造函數和超級。訪問它

比較不同類型的本機JavaScript彈出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各種內置彈出API，它們顯示用於用戶交互的特殊UI。著名：

為什麼可訪問的網站如此難以構建？Apr 15, 2025 am 10:45 AM

前幾天，我與一些前端人們聊天，講述了為什麼這麼多公司努力創建可訪問的網站。為什麼可訪問的網站如此艱難

'隱藏”屬性顯然很弱Apr 15, 2025 am 10:43 AM

有一個HTML屬性，它可以正是您認為應該做的：

See all articles

熱AI工具

熱工具

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），