css圖片壓縮_如何在HTML中用CSS對圖片進行縮放

① 如何用DIV+CSS控制圖片大小范圍

使用CSS max-width和max-height實現圖片自動等比例縮小
很簡單我們要使用到max-width和max-height,這樣即可設置對象圖片最大寬度和最大高度，這樣圖片就會等比例縮放圖片，然圖片相對不變形清晰。
使用max-width:300px或max-height:100px，即可解決圖片比例縮小。但這樣存在一個問題，如果按照寬度縮放，但圖片過高會超出溢出盒子，這個時候需要對父級使用overflow:hidden隱藏超出圖片內容。但是使用max-width或max-height，IE6不支持，我們需要設置個width:expression(this.width > 300 ? "300px" : this.width);或者height:expression(this.height>100?"100px":this.height);。

解決IE6支持max-height

div css解決IE6支持max-width

一般情況下只需要設置好寬度限制，比如這里只設置最大寬度為300px(max-width:300px),然後對父級使用overflow:hidden隱藏溢出圖片，同時為了兼容IE6我們設置個width:expression(this.width > 300 ? "300px" : this.width);解決即可。

1、具體解決DIV+CSS實例代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片縮小不變形實例 www.divcss5.com</title>
<style>
.divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
.divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
</style>
</head>
<body>
<div class="divcss5">

② 如何在HTML中用CSS對圖片進行縮放

可以用css3中「transform: scale()」屬性對圖片進行縮放。

1、新建html文檔，在body標簽中添加一張圖片，給這張圖片設置css屬性，添加「tansform」縮放屬性，屬性值為「scaleX(n)」，scaleX(n)指的是對寬度進行縮放，n指的是縮放比例：

③ css 圖片高度怎麼設置才不會變形,被壓縮

設置圖片自適應，給圖片設置display:block;width:100%;不要設置高度，不要設置高度，不要設置高度。這樣圖片就能根據父級div適應大小，就是你設置一個div，裡面放圖片。div多大，圖片就多大。高度自動適應，所以不能設置高度。

④ 如何用div+css壓縮圖片

給你一個過程你看下
<%
dim arr(3)
dim upload,file,formName,formPath,iCount,filename,fileExt,i
set upload=new upload_5xSoft ''建立上傳對象

formPath="../upImgFile/" '圖片存放的路徑：proct目錄下的uploadimages文件夾 ''在目錄後加(/)

''列出所有上傳了的文件
for each formName in upload.file
set file=upload.file(formName)
if file.filesize>0 then
if file.filesize>10000000 then
response.write "<font size=2>圖片大小超小了限制[<a href=# onclick=history.go(-1)>重新上傳</a>]</font>"
response.end
end if
fileExt=lcase(right(file.filename,4))
if fileExt<>".jpg" then
response.write "<font size=2>文件格式限制[<a href=# onclick=history.go(-1)>請重新上傳</a>]</font>"
response.end
end if
end if

filename=year(now)&month(now)&day(now)&hour(now)&minute(now)&second(now)&file.FileName

if file.FileSize>0 then ''如果 FileSize > 0 說明有文件數據
file.SaveAs Server.mappath(formpath&filename) ''保存文件

' 圖片位置
dim PhotoPath
PhotoPath = Server.MapPath(formpath&filename)
'縮小大圖
call OKbigpic(PhotoPath)

'response.write file.FilePath&file.FileName&"("&file.FileSize&") => "&formPath&File.FileName&"上傳成功<br>"
response.write "上傳成功 <a href=# onclick=history.go(-1)>請返回</a>"

end if
set file=nothing
next
set upload=nothing
Response.Write "<script>parent.add.P_url.value='"&FileName&"'</script>"

sub OKbigpic(FileName)
Dim bigpic,bigpicPath,fss
Set bigpic = Server.CreateObject("Persits.Jpeg")
set fss=createobject("scripting.filesystemobject")
' 設置圖片質量
bigpic.Interpolation=2
bigpic.Quality=90
' 圖片位置
if fss.fileExists(FileName) then
bigpic.Open FileName

'下面是按比例縮放
n_MaxWidth=900
n_MaxHeight=1500

'按比例取得縮略圖寬度和高度
Dim n_OriginalWidth, n_OriginalHeight '原圖片寬度、高度
Dim n_BuildWidth, n_BuildHeight '縮略圖寬度、高度
Dim div1, div2
Dim n1, n2
'修改Jpeg
n_OriginalWidth = bigpic.Width
n_OriginalHeight = bigpic.Height
div1 = n_OriginalWidth / n_OriginalHeight
div2 = n_OriginalHeight / n_OriginalWidth
n1 = 0
n2 = 0
If n_OriginalWidth > n_MaxWidth Then
n1 = n_OriginalWidth / n_MaxWidth
Else
n_BuildWidth = n_OriginalWidth
End If
If n_OriginalHeight > n_MaxHeight Then
n2 = n_OriginalHeight / n_MaxHeight
Else
n_BuildHeight = n_OriginalHeight
End If
If n1 <> 0 Or n2 <> 0 Then
If n1 > n2 Then
n_BuildWidth = n_MaxWidth
n_BuildHeight = n_MaxWidth * div2
Else
n_BuildWidth = n_MaxHeight * div1
n_BuildHeight = n_MaxHeight
End If
End If

'指定寬度和高度生成
bigpic.Width = n_BuildWidth
bigpic.Height = n_BuildHeight

' 保存文件
bigpic.Save (FileName)
' 注銷對象
Set bigpic = Nothing

end if
end sub
%>

⑤ css 背景圖片怎麼壓縮不重復平鋪

IE11+應該支持的，其他就別想了。

⑥ css div 尺寸被壓縮了怎麼辦

你有幾個單詞不認真寫錯了

li{list-style-type:none;}
#c3{margin-top:33px;clear:both;}
#c3.c3{float:left;width:300px;overflow:hidden;}
#c3.c3-center{margin:auto50px;}
#c3.c3.header{height:34px;overflow:hidden}
#c3.c3.header.title{line-height:24px;font:"微軟雅黑",Arial18px;color:#333;float:left;width:220px;padding-bottom:7px;border-bottom:#fd80002pxsolid}
#c3.c3.header.titlespan{color:#fd8000;}
#c3.c3.header.more{float:left;width:80px;overflow:hidden;height:32px;border-bottom:#3537481pxsolid;}
#c3.c3.header.moreaimg{border:0;float:right;display:block;margin-top:4px;}
#c3.c3.content{margin:44px0px25px0px;}
#c3.c3.contentp{text-indent:28px;font-size:14px;line-height:24px;margin:0px;padding-top:25px}
#c3.c3.content.abc{font-size:14px;line-height:30px;color:#cacaca;border-bottom:2px#cacacadotted;padding-top:2px;margin:0;padding-left:0;}
#c3.c3.content.abc.abc1{color:#cacaca;line-height:25px}
#c3.c3.content.date{font-size:14px;line-height:34px;color:#cacaca}
#c3.c3.content.date.date1{line-height:25px;margin-top:3px}

⑦ css 背景圖片從中間壓縮

這個可以調整整張背景圖片的位置，把整個網頁的背景圖做成一張png圖片，然後控制位置即可。

⑧ css 背景圖片從中間壓縮（如圖）

把背景圖片重新做一下處理，分為兩張圖。
<ul>
<li><h4>首頁</h4></li>
</ul>
li背景設為左端把左端盡量做長一點， h4標簽的背景設為右端居右不重復

⑨ background-image背景圖片怎麼用css縮小

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

⑩ html/css 網頁背景圖片，如何自適應寬度，長度不壓縮 div如何半透明詳解

導航:首頁 > 文件處理 > css圖片壓縮

css圖片壓縮

與css圖片壓縮相關的資料