欢迎光临小鱼网个人网站!

登录/注册
css3完美解决前端图片变形问题

一、让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中:

<style type="text/css">
    div{width: 100px;height: 100px;margin-left: 300px;overflow: hidden;border: 2px solid #0000FF;position: relative;}
    img{width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>
<div><img src="images/banner.jpg"></div><br/><div><img src="images/email.png"></div>

image.png

二、让图片始终显示在容器内,并且居中显示。这种方法不会裁切图片。

<style type="text/css">
    div{width: 100px;height: 100px;margin-left: 300px;overflow: hidden;border: 2px solid #0000FF;position: relative;}
    img{max-width: 100%;max-height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>
<div><img src="images/banner.jpg"></div><br/><div><img src="images/email.png"></div>

image.png

三、JS实现:当图片的宽度大于高度,则设置图片的宽度为100%,如果图片的高度大于宽度,则设置高度为100%

<style type="text/css">
    div{width: 100px;height: 100px;margin-left: 300px;overflow: hidden;border: 2px solid #0000FF;position: relative;}
    img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>
<div><img src="images/banner.jpg"></div><br/><div><img src="images/email.png"></div>
<script src="js/jquery-1.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//一定要等图片加载完再进行计算
	window.onload = function(){
		$('img').each(function(){
			var _w = $(this).width();
			var _h = $(this).height();
			if(_w > _h){
				$(this).css('width','100%');
			}else{
				$(this).css('height','100%');
			}
		})
	}
</script>

四、object-fit和object-position。object-position相当于background-position,它的默认值是50% 50%,也就是居中,所以一般不写,加了object-fit,默认就居中了。而object-fit,相当于background-size,即图片填充方式(这里不是图片大小)

       object-fit: fill; 

  object-fit: contain; 

  object-fit: cover; 

  object-fit: none; 

  object-fit: scale-down; 

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见(上面讲解的例子就是如此)。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个


Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。