在網頁設計中,經常會使用到圖片來美化頁面,但是很多時候圖片不能很好地展示,需要通過CSS來進行處理。本文將介紹如何將圖片劇中并且倆邊拉長。
img { display: block; margin: auto; width: 100%; max-width: 600px; height: auto; }
通過設置display為block,可以讓圖片與周圍的文本分離;設置margin為auto,可以將圖片劇中;設置width為100%,可以使圖片充滿整個父級容器;設置max-width為600px,可以控制圖片的最大寬度,避免過度拉伸;設置height為auto,可以根據寬度自適應高度。
如果想要在不改變原始圖片寬高比的情況下,將圖片拉伸至容器的寬度,可以使用以下代碼:
img { display: block; margin: auto; width: 100%; height: 100%; object-fit: cover; }
通過設置width和height為100%來填滿整個容器,設置object-fit為cover,可以將圖片拉伸至容器的寬度,并保持原始寬高比。
以上就是如何使用CSS將圖片劇中并且倆邊拉長的方法,希望對大家有所幫助。
下一篇css圖片加熱點