首頁 >web前端 >css教學 >CSS調節圖片的大小，要知道width、height

CSS調節圖片的大小，要知道width、height

高洛峰原創: 2017-02-08 10:11:332428瀏覽

今天學習的內容是教大家如何用css調整圖片的大小，在之前的課程範例中，我們接觸了width和height這兩個屬性，這兩個屬性分別是用來設定元素的寬度和高度的。
在CSS中，對於圖片的大小，我們也是用width和height來定義。語法：

說明：在CSS初學階段，全部都是使用像素作單位，在CSS進階階段我們會深入講解其他CSS單位舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        img{width:60px;height:60px;}
    </style>
</head>
<body>
    <img src="/static/imghwm/default1.png"  data-src="../App_images/lesson/run_cj/cartoongirl.gif"  class="lazy"   alt=""/>
</body>
</html>

在瀏覽器預覽效果如下：

CSS調節圖片的大小，要知道width、height

🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜分析：不管圖片的實際大小是多少，你都可以使用width和height來定義你想要的高度和寬度。大家別傻乎乎的還用PS做好高度和寬度才敢把那張圖片用到頁面上。 🎜🎜更多CSS調節圖片的大小，要知道width、height相關文章請關注PHP中文網！ 🎜

陳述：

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

上一篇：CSS入門教學：圖片邊框border下一篇：CSS入門教學：圖片邊框border

看更多