CSS在圖片上的設(shè)置，通常指的是利用CSS樣式來美化或控制圖片的外觀，雖然CSS本身并不直接“設(shè)置”在圖片上，而是應(yīng)用于包含圖片的HTML元素，但結(jié)果上可以理解為對(duì)圖片進(jìn)行了設(shè)置。

圖片排版

CSS可以用來控制圖片的排版，通過display屬性，可以設(shè)定圖片是塊級(jí)元素還是行內(nèi)元素。

img {
  display: block;
}

這將使圖片成為塊級(jí)元素，類似于一個(gè)段落，如果你想讓圖片在一行中顯示，可以使用：

img {
  display: inline;
}

圖片尺寸

CSS中的width和height屬性可以用來設(shè)定圖片的尺寸。

img {
  width: 200px;
  height: 300px;
}

這將使圖片的寬度限制為200像素，高度限制為300像素，如果你想要保持圖片的原始尺寸，可以使用max-width和max-height屬性：

img {
  max-width: 100%;
  max-height: 100%;
}

圖片邊框和背景

CSS中的border屬性可以用來給圖片添加邊框，background屬性可以用來設(shè)置圖片的背景。

img {
  border: 2px solid #000;
  background: #fff url('path/to/image.png') no-repeat;
}

這將給圖片添加2像素寬的黑色邊框，并設(shè)置背景為白色并顯示指定路徑的圖片。

圖片響應(yīng)式布局

在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，響應(yīng)式布局是非常重要的一部分，CSS中的媒體查詢（Media Queries）可以幫助我們根據(jù)屏幕大小來設(shè)置不同的圖片尺寸和排版。

img {
  width: 100%;
  height: auto;
}
@media (min-width: 600px) {
  img {
    width: 50%;
  }
}

這將使圖片在小于600像素寬度的屏幕上占滿全屏，而在大于600像素寬度的屏幕上只占屏幕寬度的一半。

CSS在圖片上的設(shè)置非常廣泛，從簡單的尺寸調(diào)整到復(fù)雜的響應(yīng)式布局，都可以輕松實(shí)現(xiàn)，通過理解和應(yīng)用這些CSS技巧，你可以更好地控制和美化你的網(wǎng)頁圖片。