示例:卡片按钮(一)

完全自适应屏幕分辨率,放不下了就自动换行;
图片也设置了限定最大高宽,超出或者不够都会自动适应框内,不会留白和超出;
感谢 CL 的自动换行框架,感谢 darcyc 的图片限定 CSS 代码。

<style>
	.ka_pian_men {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 5px;
	}
</style>
<style>
  .my_img {
	  box-shadow: 0px 0px 2px 2px rgb(23 162 184 / 35%);
    padding: 5px;
    border-radius: 2% !important;
    height:300px;
    width:200px; 
    object-fit: cover;
  }
</style>
<div class="ka_pian_men" style:display: flex;>
<!----------------------------->
<div class="card border-0" style=margin-bottom:20px>
<div><button id="btnCopyToClipboard" class="btn btn-link">
<a href="网址链接" target="_blank">
<img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/124803_202824_no.png' class='my_img no-lity'>
</a></button></div>
<div align="center">
<a class="btn btn-info btn-sm" href="AAA" target="_blank" role="button">暂无信息  <span class="badge badge-light">0</span></a>
</div>
</div>
<!----------------------------->
<div class="card border-0" style=margin-bottom:20px>
<div><button id="btnCopyToClipboard" class="btn btn-link">
<a href="网址链接" target="_blank">
<img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/124803_202824_no.png' class='my_img no-lity'>
</a></button></div>
<div align="center">
<a class="btn btn-info btn-sm" href="AAA" target="_blank" role="button">暂无信息  <span class="badge badge-light">0</span></a>
</div>
</div>
<!----------------------------->
</div>