CSS圖片隨可視窗口改變

隨著現代 Web 技術的發展，越來越多的人開始使用 CSS 來控制圖片的樣式和大小。CSS 可以用于更改圖片的外觀，包括縮放、旋轉和背景顏色等。本文將介紹如何使用 CSS 來控制圖片的樣式，以及如何使用 CSS 的媒體查詢和圖片的柵格系統來實現圖片隨可視窗口改變的效果。

CSS 媒體查詢

CSS 媒體查詢是一種用于控制元素樣式的技術，它可以根據指定的媒體類型(如音頻、視頻、圖片等)來更改元素的樣式。媒體查詢的語法如下：

```css

@media mediatype and (media feature) {

/* CSS rules for the media type and media feature */

其中，`mediatype` 表示媒體類型，例如 `screen`、`print`、`speech` 等，而 `media feature` 則表示可以影響樣式的條件，例如 `font-size`、`font-style`、`font-weight` 等。

使用 CSS 媒體查詢，我們可以輕松地控制圖片的大小和樣式。例如，我們可以使用以下 CSS 代碼來將圖片縮小到屏幕寬度的 50% 以下：

```css

width: 50%;

height: auto;

在這個例子中，`width: 50%;` 表示圖片的寬度將縮小到屏幕寬度的 50%，而 `height: auto;` 表示圖片的高度將保持不變，以確保圖片的比例正確。

CSS 柵格系統

CSS 柵格系統是一種用于控制元素大小和布局的技術，它可以根據元素的父元素的 `width` 和 `height` 屬性來限制元素的大小。使用 CSS 柵格系統，我們可以輕松地控制圖片的大小和位置。例如，我們可以使用以下 CSS 代碼來將圖片居中并縮小到屏幕寬度的 50% 以下：

```css

.box {

width: 300px;

height: 200px;

background-color: blue;

position: relative;

width: 50%;

height: auto;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

通過使用 CSS 來控制圖片的樣式，我們可以輕松地實現圖片隨可視窗口改變的效果。使用 CSS 媒體查詢和 CSS 柵格系統，我們可以輕松地控制圖片的大小和位置，從而實現各種樣式效果。