图片居中，自适应大小

最新推荐文章于 2023-09-26 19:04:47 发布

张_锋

最新推荐文章于 2023-09-26 19:04:47 发布

阅读量4.5k

点赞数 1

分类专栏： Web开发文章标签： image border div web

本文链接：https://blog.csdn.net/sunshinestation/article/details/7335762

版权

Web开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

Web中将图片居中，且自动缩放至固定大小。

<div style="height: 202px; width: 202px; border: 1px solid red; text-align: center; display:table-cell; vertical-align:middle;">
	<img id="image" style="max-width: 200px; max-height:200px;" src="3.png" />
</div>

<button οnclick="document.getElementById('image').src='1.jpg'">Image1</button>
<button οnclick="document.getElementById('image').src='2.jpg'">Image2</button>