CSS 可以幫助我們控制網(wǎng)頁(yè)中的圖像,包括它們的位置和大小。如果您想讓圖片橫著放,CSS 同樣可以幫助您實(shí)現(xiàn)這個(gè)目標(biāo)。
讓我們來(lái)看看下面的示例,我們將利用 CSS 將圖片橫向放置:
img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
在上面的代碼中,我們使用了display: block;
使圖片成為塊級(jí)元素,并將其居中顯示,而max-width: 100%;
和height: auto;
可以將圖片的寬度自適應(yīng)屏幕大小。
如果您想要將圖片橫向放置,只需再添加以下代碼:
img { display: block; margin: 0 auto; max-width: 100%; height: auto; transform: rotate(90deg); }
通過(guò)添加transform: rotate(90deg);
,我們可以將圖片旋轉(zhuǎn)90度,從而橫向放置。
如果您想將圖片旋轉(zhuǎn)回來(lái),只需再次更改度數(shù)即可:
img { display: block; margin: 0 auto; max-width: 100%; height: auto; transform: rotate(-90deg); }
這些簡(jiǎn)單的 CSS 代碼可以幫助您實(shí)現(xiàn)想要的圖片橫向放置效果。