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

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

留言