在 HTML 中 img 标签大小设置有几种情况:
不设置width和height,默认显示图片真实大小。
设置width或height中的一个,另一个按比例自动缩放。
设置width和height,显示指定大小。(可能会导致变形)
对于图片适配超好用的css3属性–Object-fit
当我们设置为百分比,自动调整显示比例时,不同的设备都按照这个比例显示,移动设备、手机和台式电脑屏幕的显示就存在问题了,能不能设置一个最大值呢?
当终端为台式电脑时,按最大值显示,为移动、手机终端时着按百分比显示,废话不多说,直接看代码:
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:50px;
max-height:500px;
_height:expr
ession(this.height>500?”500px”:”atuo”);
max-width:675px;
_width:expression(this.width>675?”675px”:”atuo”);
}
</style>
</head>
<body>
<img src="images/ZHUEi.jpg" width="100%">
</body>
如果你发现错误或有其他见解,请给 www.zhuei.com 留言,我们会尽快更新本文!