HTML如何讓IMG自動適應DIV容器大小

2022-01-13 14:22:12 字數 424 閱讀 8170

img樣式(橫向拉伸,縱向自動匹配大小)

div樣式(元素居中顯示)

img樣式(橫向拉伸,縱向自動匹配大小)

width:100%;

height:auto;12

div樣式(元素居中顯示)

display:flex;

align-items:center;

justify-content:center;12

3示例**如下:

如下是兩個大小和比例都不同的,應用這個方法可以讓自動填充並居中顯示

123456

78910

1112

1314

1516

1718

1920

2122

2324

2526

2728

2930

SEO如何讓蜘蛛適應你

在保證 內容的質量前提下,與其說做 是針對使用者體驗,不如說做 是針對搜尋引擎,說針對搜尋引擎不如說是針對蜘蛛,既如此,了解蜘蛛的工作原理,熟悉蜘蛛的抓取方式成為重中之重,先滿足蜘蛛後,才能通過搜尋引擎展現給使用者,達到使用者體驗。很多的站長在進行優化的工作時,總是去配合去適應蜘蛛的抓取方式和習慣,...

HTML網頁設計自動適應螢幕寬度

允許網頁寬度自動調整 自適應網頁設計 到底是怎麼做到的?其實並不難。首先,在網頁 的頭部,加入一行viewport元標籤 是網頁預設的寬度和高度,上面這行 的意思是,網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0,即網頁初始大小...

單元格寬度 如何讓文字自動適應單元格?

如圖 8 23所示為某公司人力資資部人員製作的考勤表,由於考勤表需要用a4紙橫向列印,但於空間有限,在單元格中錄入內容 如30 時,單元格寬度就會增加,工作人員希望實現在單元格中不管內容有多少單元格寬度都固定不變,如何操作?圖8 23考勤表 1 解決方案 利用 適應文字 功能讓文字自動適應單元格。2...