CSS樣式控製圖片裁切顯示

來源:互聯網
上載者:User
css|控制|顯示

  我們在論壇新聞系統的時候,其中的有些圖片會比較大破壞了整體布局的美觀,現通過CSS定義方式使圖片進行裁切顯示,即,當圖片的容器不足以顯示整個圖片時,會以左上方為開始顯示,不足顯示的將會隱藏。相關各位同仁也有此想法。現有以下CSS樣式,所以貼出來同各位WEB 開發人員共用!

  當然有人用img 的onload 事件對其寬高進行js控制,不過經招有時會因網頁載入過快,或過慢而來不及執行,現向大家推薦代碼如下,自行研究。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.divClass{height:100%;width:100%;overflow:hidden;Margin-bottom:5px}
</style>
<title>COPY資料到ID群集中by ID | 圖片CSS定義裁切顯示| 文字的寬度自適應縮放</title>
</head>

<body >
<div id="airzen" class="divClass"><img src="05122821154187236.jpg"></div>
</body>

  說明:以上樣式你可以自己定義,但要保留overflow:hidden;祝各位工作愉快!



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。