CSS图片剪裁与原比例压缩或放大
2016-07-06 13:51
330 查看
在前端网页制作的过程中,图片的处理往往比较头疼,当然不考虑你有很给力的美工后援的情况下。以下将对一些常见的CSS图片处理需求情况进行分析:
1、一张图片要放在固定宽高的内容块中,并填充满整个内容块(看起来整齐划一)
我们假设要把一张大小为1920*1200的图片放在400*400的内容块中,由于这时图片是长大于宽的,为了保证图片看起来不被压缩,可以固定宽度,从图片中间向左右两侧裁剪以保留图片的核心内容。如下图所示(左图为原图,右图则为实际显示在400*400内容内的图片内容)
HTML代码:
若原始图片大小为683*984,即长小于宽,为了保证图片看起来不被压缩,可以固定长度,从图片中间向上下两端裁剪以保留图片的核心内容。如下图所示(左图为原图,右图则为实际显示在400*400内容内的图片内容)
CSS代码:
2、网站背景图片符合响应式布局,从台式机到手机,显示面积变小,从中间向四周截取部分作为背景显示。
CSS代码:
重点是将图片设置为背景图片。
PS:以后遇到更多的CSS图片处理问题还会继续更新~小伙伴们敬请期待 :)
1、一张图片要放在固定宽高的内容块中,并填充满整个内容块(看起来整齐划一)
我们假设要把一张大小为1920*1200的图片放在400*400的内容块中,由于这时图片是长大于宽的,为了保证图片看起来不被压缩,可以固定宽度,从图片中间向左右两侧裁剪以保留图片的核心内容。如下图所示(左图为原图,右图则为实际显示在400*400内容内的图片内容)
HTML代码:
<div class="cover"> <img src="img/cover.jpg"/> </div>CSS代码:
img { height: 100%; width: auto; left:50%; position: relative; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); } .cover { margin:100px auto; width: 400px; height: 400px; overflow: hidden; border: 1px solid cornflowerblue; position: relative; }
若原始图片大小为683*984,即长小于宽,为了保证图片看起来不被压缩,可以固定长度,从图片中间向上下两端裁剪以保留图片的核心内容。如下图所示(左图为原图,右图则为实际显示在400*400内容内的图片内容)
CSS代码:
img { width: 100%; height: auto; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); position: relative; }
2、网站背景图片符合响应式布局,从台式机到手机,显示面积变小,从中间向四周截取部分作为背景显示。
CSS代码:
.jumbotron { padding: 0; background-image: url(../img/cover.jpg); background-position: center center; }
重点是将图片设置为背景图片。
PS:以后遇到更多的CSS图片处理问题还会继续更新~小伙伴们敬请期待 :)
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- html5 web数据存储
- SEO
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载