个人随笔代码实现以下功能：1、加载网络未知尺寸的图片，用户可以随意输入显示区的大小，图片会自动适应宽高。2、水平、垂直居中未知尺寸的图片
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>水平并垂直居中未知大小的图片</title>
6 <style>
7 #imageBox {
8 width: 250px;
9 height: 250px;
10 margin: 30px auto;
11 border: 1px solid green;
12 display: table; /**key point**/
13 text-align: center;
14 }
15
16 .spaceSpan {
17 height: 100%;
18 display: table-cell; /**key point**/
19 vertical-align: middle; /**key point**/
20 }
21
22 #testImage {
23 vertical-align: middle;
24 }
25
26 </style>
27 <script>
28 function zoomImage(imageId, imageBoxWidth, imageBoxHeight) {
29 var image = document.getElementById(imageId);
30 //计算出图片容器的宽高比
31 var imageBoxWidthHeightScale = imageBoxWidth / imageBoxHeight;
32 //计算出实际图片的宽高比
33 var imageWidthHeightScale = image.width / image.height;
34 var widthScale = image.width / imageBoxWidth;
35 var heightScale = image.height / imageBoxHeight;
36 var maxScale = Math.max(widthScale, heightScale);
37 if (maxScale < 1) { //图片宽高都比盒子小时不对图片操作
38 return null;
39 } else { //图片的宽或者高大于盒子大小时
40 if (imageBoxWidthHeightScale > imageWidthHeightScale) { //盒子相对图片来说更"扁",此时控制图片的高度
41 image.height *= heightScale > 1 ? 1 / heightScale : heightScale;
42 } else { //图片相对盒子来说更"扁",此时控制图片的宽度
43 image.width *= widthScale > 1 ? 1 / widthScale : widthScale;
44 }
45 }
46 }
47 </script>
48 </head>
49 <body>
50 <div id="imageBox">
51 <span class="spaceSpan">
52 <image id="testImage"
53 src="http://daily.clzg.cn/res/1/20160311/75231457630062963.jpg"
54 onload="zoomImage(‘testImage‘,200,200)"/>
55 </span>
56 </div>
57 </body>
58 </html>
实际效果如下图：
时间： 2024-08-05 07:20:00