CSS可以幫助我們將圖片填滿容器,讓我們來看一下如何實現。
.container { width: 100%; height: 100%; position: relative; overflow: hidden; } .container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; }
首先,我們需要一個容器來包含圖片,容器的寬度和高度都設置為100%。為了防止圖片溢出容器,我們將其overflow屬性設置為hidden。
然后,圖片進行絕對定位,top和left屬性都設置為50%,這樣就可以讓圖片水平垂直居中。接著,我們使用transform將圖片向左上方移動50%的距離,這樣就可以讓圖片完全填滿容器了。
最后,我們還可以設置圖片的min-width和min-height屬性為100%,這樣可以讓圖片保持最小寬度和最小高度都為100%。
以上是CSS實現圖片填滿容器的簡單方法,希望對大家有所幫助。