一個及其簡單的圖片自適應

時間 2020-01-22

標籤一個及其簡單圖片自適應欄目 CSS 简体版

原文原文鏈接

說到圖片自適應，咱們首先確定會想到當前前端的響應式佈局問題。那麼在這兒而介紹一個簡單的處理方法，就是讓圖片適應當前屏幕的尺寸，咱們在img標籤外面包含一層div，用div來操做。css

下面的方法來自公衆號「前端大全」，做者是「百碼山莊」前端

body代碼：佈局

<body>
		<div id="div"><img src="img/5.jpg" alt="" /></div><br />
		<div id="div"><img src="img/1.jpg" alt="" /></div><br />
		<div id="div"><img src="img/11.jpeg" alt="" /></div>
	</body>

css代碼：code

<style>
		#div{
			display: inline-block;
		}
		#div img{
			width: 100%;
		}
	</style>

這樣咱們拉動屏幕就能夠看見效果啦圖片

拉動以後：響應式

繼續拉小：自適應

相關標籤/搜索