CSS图片剪裁与原比例压缩或放大

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/memeda_bupt/article/details/51837534

在前端网页制作的过程中,图片的处理往往比较头疼,当然不考虑你有很给力的美工后援的情况下。以下将对一些常见的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图片处理问题还会继续更新~小伙伴们敬请期待 :)








展开阅读全文

没有更多推荐了,返回首页