缩放 div
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><style>.scalable-div {width: 400px;height: 700px;background-color: #3498db;margin: 0 auto;transition: transform 0.3s ease;transform-origin: bottom center;}</style>
</head>
<body class="flex flex-col items-center justify-center h-screen bg-gray-100"><button id="scaleButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">缩放 div</button><div class="scalable-div mt-4">54654654645<img src='https://pic.tupian168.com/meinv/img/20250405/3orfnuibznv.jpg' style='max-height:133px;'/></div><script>const scaleButton = document.getElementById('scaleButton');const scalableDiv = document.querySelector('.scalable-div');let isScaled = false;scaleButton.addEventListener('click', () => {if (isScaled) {scalableDiv.style.transform = 'scale(1)';} else {scalableDiv.style.transform = 'scale(0.5)';}isScaled = !isScaled;});</script>
</body>
</html>