當前位置: 首頁 > 技術分享  > 開發技術 > 網站運營

CSS控制圖片尺寸,防止超出邊框或變形

2017/11/29 9:05:27 人評論

目標:設置最大寬度是500px 如果大于500就把圖片寬度設置為500 高度就會隨著比例也會縮小 防止圖片變形img {max-width:500px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 500)?"500px":"auto"});}img,a img{bor…

目標:設置最大寬度是500px 如果大于500就把圖片寬度設置為500 高度就會隨著比例也會縮小 防止圖片變形

img {max-width:500px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 500)?"500px":"auto"});}
img,a img{
border:0;
margin:0;
padding:0;
max-width:500px;
width:e-xpression(this.width>500?"500px":this.width);
max-height:500px;
height:e-xpression(this.height>500?"500px":this.height);
}
div img {
max-width:500px;
width:600px;
width:expression(document.body.clientWidth>500?”500px”:”auto”);
overflow:hidden;
}

max-width:500px; 在IE7、FF等其他非IE瀏覽器下最大寬度為500px。但在IE6中無效。

width:500px; 在所有瀏覽器中圖片的大小為500px;

當圖片大小大于500px,自動縮小為500px。在IE6中有效。

overflow:hidden; 超出的部分隱藏,避免控制圖片大小失敗而引起的撐開變形。


如果想設定圖片的高度和寬度都不超過某一個固定值,就需要在圖片高度或寬度超過這個值的時候,讓圖片按比例縮小到這個尺寸。

1、對于現代瀏覽器,比如Firefox或是IE7及以上,直接使用max-width和max-height兩條CSS屬性即可。

2、對于IE 6.0及以下版本,以上兩條CSS屬性均不會被理會。之前處理這種事情,我們往往會借助Javascript,然后為圖片加上onload事件。例如:

<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
  functionresizeImage(obj){
  obj.width=obj.width>50&&obj.width>obj.height?50:auto;
  obj.height=obj.height>50?50:auto;
  }
</script>


相關技術

  • 查看異常端口應用,結束異常進程

    1、 Cmd輸入命令:netstat -a -o 查詢所有端口和對應PID信息查詢對應端口號 netstat –ano|findstr “端口號” ,如netstat –ano|findstr “8080”記下PID,最后一行為PID,這里為396 2,Cmd輸入命令:taskkill -f -pid PID號,如taskkill -f -pid 396。

    2015/7/13 15:15:34
  • 5個技巧有效提升網站流量

    網站需要創造價值,如果只是設計得漂亮或者使用華麗酷炫的技術是遠遠不夠的。建站最重要的目的是為了給公司創造效益,如果吸引不到訪客…

    2014/9/17 7:57:06
  • 按Ctrl縮放網頁功能

    訪問部分網站,發現字太小,看不清楚。想起了利用Ctrl+鼠標滾輪進行放大查看。關閉網頁后,查看其他網頁,字體確變的很大,影響美觀。利…

    2014/9/16 12:38:04
  • 網站長時間沒有什么更新卻排名很好

    今天在QQ群里大家討論了一個問題:有一個網站長時間沒有什么更新、排名很好。長時間不更新的網站體驗并不好,不是說網站需要經常更新內容嗎?前兩天也在搜外問答里看到一位朋友提問:一個不更新的頁面怎樣讓快照更新。針對這樣的問題我們一起交流一下。到底網站要怎樣添加內容…

    2014/9/13 22:29:41

共有條評論 網友評論

驗證碼: 看不清楚?
    广东26选5开奖