Html 基于CSS和媒体查询的图像重放

我有一个图像，我想切换它的css根据屏幕大小又名媒体查询。现在，代码看起来像这样

当然，它有宽度和高度写在内联

在CSS中，我想更改图像的大小。例如，在全屏幕上，我希望图像显示其全宽，在移动屏幕上，我希望显示200px的

宽度。如何通过CSS和媒体查询实现这一点

谢谢。
只需指定目标介质的类型和断点即可。比如说

用于桌面

img { width:100%; height:auto }

移动电话

@media screen and (max-width:640px) {
    img { width:100%; max-width:200px; height:auto; }
}

我必须从内联中获取宽度和高度，并将其放在css中吗？不，内联内容可以保留，它基本上表示“这是我的默认比率”，css将从那里放大图像。这些属性不是强制性的，但它们是良好的做法。：）它不起作用了。手机的大小可以正常工作，但桌面不会改变。我实际上输入的是PX值，而不是100%。该文件是巨大的100%。对不起，我想我误解了问题的一部分。您的意思是保留桌面的默认图像大小并在移动设备上缩放到200px宽吗？若是这样的话，我已经创造了一个可能的解决方案。让我知道这是否是你的意思：）是的，这就是我的意思。谢谢