如何编写可随窗口大小自适应缩放的可点击图标代码？

问题背景 #

我正在做个人项目，用自定义编写的快捷方式替换Google Sites里的默认快捷方式，目标是给快捷方式加上鼠标悬停时的阴影框效果。但目前遇到问题：在小屏幕或低分辨率环境下，这些快捷方式无法自适应缩放。希望在不破坏现有代码的前提下，找到实现自适应缩放的方法。

我试过调整快捷方式里的图片尺寸、把边距和内边距设为0，都没解决问题。我正在自学HTML和CSS，相关知识储备有限。

现有代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<a href="https://account.activedirectory.windowsazure.com/applications/signin/c0bfa137-8b9d-4932-b679-7691f7e554a7?tenantId=7943f8c0-cf11-411f-800f-3c985acdf6ec" target="_blank">
<style>
    .card {
        transition: box-shadow .3s;
        width: 155px;
        height: 48px;
        margin: 1px;
        border-radius:1px;
        float: left;
        background: url("https://drive.google.com/uc?export=view&id=1XlH5BS7Geh_1mjDwQo4FQOsxcmxa5OWG") no-repeat;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        background-position: left;
        position: relative;
    }

    .card:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
        width: 155px;
        height: 48px;
        
    }
</style>
</head>
<body>
    <div class="card"></div>
</a>
</body>
</a

分步解决方案 #

1. 先修复HTML结构错误 #

你现有代码里存在明显的HTML结构问题：<a>标签嵌套在了<head>标签内部，而且结尾标签不完整，这会导致浏览器渲染异常，先修正：

• 把<a>标签移到<body>里，用来包裹.card元素
• 补全所有未闭合的标签（比如最后一个错误的</a>应该是</html>）

2. 用相对单位替换固定宽高 #

把.card的固定像素宽高改成视窗相对单位（vw），让元素能跟随屏幕宽度自动缩放，同时保持原有的宽高比例：

• 原宽高比是155:48，所以用calc()来计算高度，保证缩放时不变形
• 示例：把width: 155px改成width: 20vw（表示占视窗宽度的20%，可根据你的布局需求调整数值），高度对应改成height: calc(20vw * 48 / 155)

3. 让背景图片自适应容器 #

给.card添加background-size: contain，确保背景图片能跟着容器缩放，完整显示在卡片内，同时把background-position改成center让图片居中显示。

4. 移除hover状态的固定宽高 #

hover状态里的宽高和默认状态重复，而且固定像素会导致缩放异常，直接删掉这两行即可，阴影效果不会受影响。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
    .card {
        transition: box-shadow .3s;
        width: 20vw; /* 占视窗宽度的20%，可调整 */
        height: calc(20vw * 48 / 155); /* 保持原宽高比 */
        margin: 1px;
        border-radius: 1px;
        float: left;
        background: url("https://drive.google.com/uc?export=view&id=1XlH5BS7Geh_1mjDwQo4FQOsxcmxa5OWG") no-repeat center;
        background-size: contain; /* 背景图片自适应容器 */
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        position: relative;
    }

    .card:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
        /* 删掉重复的固定宽高 */
    }
</style>
</head>
<body>
    <a href="https://account.activedirectory.windowsazure.com/applications/signin/c0bfa137-8b9d-4932-b679-7691f7e554a7?tenantId=7943f8c0-cf11-411f-800f-3c985acdf6ec" target="_blank">
        <div class="card"></div>
    </a>
</body>
</html>

额外优化建议 #

• 如果需要控制最小/最大尺寸，可以给.card加上min-width和max-width，比如min-width: 120px; max-width: 200px;，避免在极端屏幕下显示过大或过小
• 若有多个快捷方式，建议用Flexbox布局替代float，更易实现响应式排列，比如给父容器加display: flex; flex-wrap: wrap;

内容的提问来源于stack exchange，提问作者Danniel Benner