怎么使图片等比缩放并居中？

testerAPP 2020-02-25 06:02:43

如上图所示，这个页面有头部和底部悬浮（无滚动条），而图片不论宽高大小（图片和页面尺寸不固定）只显示在蓝色区域内，上下左右空出一定的距离（上下和左右空出的距离不需要对称，上下左右只要居中就行，但不要被头部和底部的悬浮盖住），请问用JS该怎么做呢？

就像下面这个移动端页面的效果一样。

https://m.gaoding.com/design?id=118309&simple=1

改变尺寸后，依然不会上下遮挡。图片也会相应变大或变小。怎么用JS实现呢？T-T

...全文

766 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

凡尘向天 2020-04-06

打赏
举报

1. 图片水平垂直居中用 flex 布局 display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ 2. 等比例缩放可以用 transform 熟悉 transform: scale(填写你要缩放的比例);

testerAPP 2020-02-26

打赏
举报

引用 2 楼天际的海浪的回复:

T-T，因为这是在微信里面的页面，图片需要长按保存，如果用背景来写，就无法执行长按保存图片的操作了，而我还需要获取显示图片的宽和高，因为还有一个二维码需要在图片宽高的范围内手指随意移动。如果父级没有宽高用手指移动二维码图片就会有问题，点击的时候二维码图片就移走了，要么就是二维码图片不在图片显示的范围内（手指移动图片已经搞好了）。就是这个图片显示存在问题，因为只有一页，无法滚动，图片不论宽高还要全部内容显示在手机一屏内，还不能遮挡上下悬浮。T-T 偶然间看到这个页面，https://m.gaoding.com/design?id=118309&simple=1，是我想要的效果，无论怎么改变大小，会按页面宽高来等比缩放图片，使其在正中，而且是IMG标签的。不知道可有什么办法能实现。还是先非常感谢您能回复并给予的帮助。还望您能够给予解答，再次感谢

testerAPP 2020-02-26

打赏
举报

引用 4 楼天际的海浪的回复:

我还有个问题，不知道可不可以也帮忙看下，T-T。最近出现太多问题啦，老麻烦您实在不好意思 https://bbs.csdn.net/topics/395935565

testerAPP 2020-02-26

打赏
举报

引用 4 楼天际的海浪的回复:

感谢，我用你给的CSS重新弄了一下，不同情况下图片尺寸也基本都兼容了。谢谢！~

天际的海浪 2020-02-26

打赏
举报


<!doctype html>
<html lang="en">
<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,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
html,body {
	margin: 0;
	height: 100%;
	background-color: #ccc;
}
#gh {
	position: fixed;
	width: 100%;
	height: 50px;
	left: 0;
	top: 0;
	z-index: 2;
	background-color: #c33;
}
#gf {
	position: fixed;
	width: 100%;
	height: 50px;
	left: 0;
	bottom: 0;
	z-index: 2;
	background-color: #c90;
}
#content {
	position: absolute;
	top: 70px;
	bottom: 70px;
	left: 20px;
	right: 20px;
}
#content > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
</style>
</head>
<body>

<div id="gh"></div>
<div id="content">
	<img src="a.jpg">
</div>
<div id="gf"></div>

</body>
</html>

天际的海浪 2020-02-25

打赏
举报


<!doctype html>
<html lang="en">
<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,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
html,body {
	margin: 0;
	height: 100%;
	background-color: #ccc;
}
#gh {
	position: fixed;
	width: 100%;
	height: 50px;
	left: 0;
	top: 0;
	z-index: 2;
	background-color: #c33;
}
#gf {
	position: fixed;
	width: 100%;
	height: 50px;
	left: 0;
	bottom: 0;
	z-index: 2;
	background-color: #33c;
}
#content {
	position: absolute;
	top: 70px;
	bottom: 70px;
	left: 20px;
	right: 20px;
	background: url("a.jpg") no-repeat center center / contain;
}
</style>
</head>
<body>

<div id="gh"></div>
<div id="content"></div>
<div id="gf"></div>

</body>
</html>

testerAPP 2020-02-25