244月

CSS图片固定宽高比例显示

前端开发DIV+CSS, 英文网站建设

代码:

HTML: <p class=“image-container”> <img src=“xxx.png”> </p>

CSS:

p.image-container { width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; }
p.image-container img { width: 100%;}

这样做图片保持原比例,只显示上方 40%

注:这样的写法对于高度比较高的图片合适,对于比较偏窄的图片只能保证宽度的100%,高度就会有空白


分享到:



No comments

星期一, 4月 24th, 2017 | 分类:前端开发DIV+CSS, 英文网站建设 | RSS 2.0 | 留言/评论 | Trackback

留言