要使用element.style實現響應式圖片，您可以結合CSS的媒體查詢（media query）和百分比寬度。以下是一個簡單的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class="responsive-image" src="your-image-source.jpg" alt="Your Image Description">
</body>
</html>
styles.css的CSS文件，并添加以下代碼：/* 默認情況下，圖片寬度為100% */
.responsive-image {
width: 100%;
height: auto;
}
/* 當屏幕寬度小于或等于768像素時，調整圖片寬度 */
@media screen and (max-width: 768px) {
.responsive-image {
width: 50%; /* 您可以根據需要調整此值 */
}
}
/* 當屏幕寬度小于或等于480像素時，進一步調整圖片寬度 */
@media screen and (max-width: 480px) {
.responsive-image {
width: 75%; /* 您可以根據需要調整此值 */
}
}
在這個示例中，我們首先將圖片的默認寬度設置為100%，這樣它就會自動調整以適應其父元素的寬度。然后，我們使用媒體查詢為小于或等于768像素的屏幕設置了一個50%的寬度限制。對于更小的屏幕，我們添加了一個額外的媒體查詢，將圖片寬度設置為75%。您可以根據需要調整這些百分比值。
