HTML 设置图片 img 最大显示

在 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 留言,我们会尽快更新本文!