編碼的世界 / 優質文選 / 生涯

DIV CSS布局中css圖片大小設置技巧

2022年5月22日
-

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)*/
}

CSS DIV圖片縮小不變形總結：最好解決方法就是從圖片本身出發，將圖片設計成與布局中寬度高度成等比例圖片，才能保證真正圖片縮小後不變形，顯示完整。

編碼的世界 / 優質文選 / 生涯

DIV CSS布局中css圖片大小設置技巧

熱門文章