DIV CSS布局中css图片大小设置技巧

最新推荐文章于 2024-10-24 12:45:33 发布

原创最新推荐文章于 2024-10-24 12:45:33 发布 · 2w 阅读

CC 4.0 BY-SA版权

本文介绍了两种在DIVCSS布局中保持图片不变形且按比例缩放的方法。一是通过设置图片的固定宽度和高度；二是利用max-width属性，并结合overflow:hidden来处理图片高度过高的情况。文章还强调了图片本身设计的重要性。

DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？我的个人解决方法如下两种：

html代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div中放置图片</title>
    <link rel="stylesheet" href="liu.css"/>
</head>
<body>
<div class="center">
    <img src="./image/1.jpg"rel=""/>
</div>
</body>
</html>

css代码如下：

*{
margin: 0;
padding: 0;
}
/*方法一*/
.center{
width: 500px;
height: 300px;
background: pink;
/*实现div里的图片水平垂直居中*/
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center>img{
/*1,图片过大1024*1024，让图片和布局高度宽度等比例缩放*/
width: 300px;
height: 180px;
}

/*方法二*/
.center{
    overflow: hidden;
    width: 500px;
    height: 300px;
    background: pink;
    /*实现div里的图片水平垂直居中*/
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
.center>img{
    max-width: 200px/*
    2，使用max-width，如果图片高度过高会超出溢出盒子，这时需要给父级使用 overflow: hidden。
    注：解决IE6使用使用max-width或 max-height：因为IE6不支持，我们需要设置
    width:expression(this.width>500px?"300px":this.width)
    或width:expression(this.width>500px?"300px":this.width)
    max-width: 500px;
    _width:expression(this.width>500?"500px":this.width)*/
}