我希望在调整浏览器大小时网站中的图像完全改变。

我一直在使用媒体查询，但我似乎无法正确使用它。 有什么想法/建议吗？

将来请添加您尝试过的代码。

如果它是一个image标签你可以使用一个类。在页面加载时隐藏第二张图像，并在特定屏幕尺寸下显示+隐藏图像 1，如下所示：

HTML

<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>

CSS

.image2{
   display: none;
}

@media only screen and (max-width: 500px){ //some value
   .image1{
     display: none;
   }

   .image2{
     display: block;
   }
}

示例 1 - 缩小浏览器 http://jsfiddle.net/vk02svc6/

OR

如果它是一个background-image你可以简单地交换图像：

HTML

<div class="example"></div>

CSS

.example{
   background-image: url("example.jpg");
}

@media only screen and (max-width: 500px){ //some value

   .example{
      background-image: url("example2.jpg");
   }
}

示例 2 - 缩小浏览器 http://jsfiddle.net/vk02svc6/1/