前言
在DIV CSS布局中对于图片排版时,如果使用CSS固定死图片大小(宽度 高度),如果图片相对于这个位置不是等比例大小,那么这张图片就会变形。以下是解决图片变形的方法。
方法
- 第一种
让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.imgcss{
width:400px;
height: 400px;
border:1px solid red;
}
.imgcss img{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="imgcss">
<img src="./image/timg.jpg">
</div>
</body>
图片原本的宽高都是800px,等比例缩小成400px后,图片不变形。如下图:
- 第二种
使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.imgcss{
width:300px;
height: 200px;
overflow: hidden;
border:1px solid red;
}
.imgcss img{
max-width: 300px;
}
</style>
</head>
<body>
<div class="imgcss">
<img src="./image/timg.jpg">
</div>
</body>
上方代码是以按照宽度缩放为例,图片高度超出部分被隐藏,但图片不会变形。效果如下: