如何使用CSS控制HTML中圖片高度寬度，統一對象內圖片高度寬度等樣式屬性？

我們在布局圖片列表時，通常我們要控制img圖片的高度和寬度這樣來達到圖片統一。

如以下這個的圖片列表布局示圖

圖片img高度寬度需要設置的實際應用

一、HTML標簽內控制寬度高度

Img標簽教程：

我們在HTML布局時候直接在圖片img標簽加寬度和高度屬性即可控制圖片高和寬

html img圖片標簽高度寬度設置

我們可以直接在圖片標簽設置寬度width和高度height，這里需要注意的是HTML img標簽內直接設置寬度和高度值不需要html單位，默認為PX像素。

img標簽內設置高度寬度優點直觀，對于文章內插入圖片可以利用此方法控制設置圖片高度寬度；缺點，如果圖片列表排版的這樣會增加很多HTML代碼，不便統一修改。

二、CSS樣式控制width、height

語法：img{width:150px;height:60px}

這里設置CSS寬度為150px,css高度為60px,注意是CSS樣式中css width和css height的值都帶單位也要記住一定帶上單位，這里和HTML img標簽內設置高度寬度不帶單位一定區別大家一定注意并記住此知識點。

如果是我們直接對img設置樣式，這樣會將整個網頁中圖片寬度高度控制了。為了控制指定對象內的圖片寬度高度樣式，我們通常在img前加上對象CSS命名。

假如我們要控制.CSS5內圖片樣式，那我們語法如下

EXP：

.CSS5?img{width:150px;height:60px}

解釋語法結構：對象選擇器命名加一個空格然后輸入img接著“{...}”構成控制指定對象內圖片樣式。

三、CSS設置IMG圖片寬度和高度實例

1、CSS設置圖片實例描述

我們在一個HTML中放圖片，1張為原始大小圖片，1張為通過CSS設置寬度和高度圖片，通過2張圖片對比分析通過CSS改變圖片大小。

2、實例完整HTML+CSS代碼如下：

css控制圖片大小在線演示 css5.com.cn

.CSS5 img{ width:300px; height:100px}

原始圖片大小

本身這個圖片寬度為165px高度60px

通過CSS改變設置圖片大小

這里設置CSS5盒子里圖片寬度300px高度100px

兩處使用圖片為同一張圖片，以便觀察效果。

3、圖片大小設置實例截圖

DIV CSS設置圖片寬度高度實例截圖

從上圖我們能看出CSS改變IMG圖片大小，從而讓圖片比原始的大。

4、在線演示：查看案例

5、打包下載：

擴展知識：

CSS類命名+空格+標簽 或者 CSS類命名+空格+CSS命名+空格+CSS命名這樣表達式CSS5叫CSS指針。

IMG樣式選擇器說明圖

這樣表達式只有“.CSS5”對象內的圖片才會寬度為150px，高度為60px。

這里CSS5給大家介紹兩種設置控制圖片高度和寬度樣式方法，當然圖片邊框等其它樣式可根據此方法擴展靈活應用。

作者：css5

總結

以上是生活随笔為你收集整理的html图片的宽度和高度设置,CSS设置img图片的宽度和高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。