接口返回图片格式不一致时处理

最新推荐文章于 2024-05-10 12:19:53 发布

dongsdh

最新推荐文章于 2024-05-10 12:19:53 发布

阅读量378

点赞数

分类专栏：有示例图片的小列子

本文链接：https://blog.csdn.net/dongsdh/article/details/105052091

版权

有示例图片的小列子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

超过显示尺寸会裁剪

<!DOCTYPE html>
<html lang="zh">
<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" />
	<title>Document</title>
	<style type="text/css">
		img{
			margin:10px;
			vertical-align: top;
		}
		.img1{
			width:200px;
			height:200px;
			object-fit:cover;
			/*object-fit:none;*/
			/*object-fit:scale-down;*/
		}
	</style>
</head>
<body>
	接口返回图片格式不一致时处理object-fit:cover;
	<div class="box">
		<pre><h1>修改平铺效果      默认显示效果</h1></pre>
		<h4>横屏图片展示</h4>
		<p>
			<img class="img1" src="heng.png" alt="" srcset="heng.png"/><img src="heng.png" alt="" />
		</p>
		<h4>竖屏图片展示</h4>
		<p>
			<img class="img1" src="shushu.png" alt="" srcset="shushu.png"/><img src="shushu.png" alt="" />
		</p>
		<h4>小图片展示</h4>
		<img class="img1" src="sm.png" alt="" srcset="sm.png"/><img src="sm.png" alt="" />
	</div>
</body>
</html>