创建可调整大小的图像，也称为响应式，使用 CSS 媒体查询非常容易。

但是，要使图像真正可调整大小，我们应该考虑将它们设为 .svg 格式。
然而，这并不总是可能的。
照片是复杂的图像，最好以 WebP 或者 JPG 格式提供。

使图像响应小屏幕分辨率的 CSS 如下所示：

@media screen and (max-width:500px) {
  .main_content img {
    width:90%;
    min-width: 300px
    display:block;
    margin:0 auto;
  }
}

此媒体查询仅在浏览器窗口小于 500px 时生效，并且它也适用于移动设备。

display:block; and margin:0 auto;尝试通过将图像转换为块元素并将 margin-left 和 margin-right 设置为 auto 来使图像居中。
居中通常在移动设备上看起来更好。

为了获得最大的兼容性，在进行响应式设计时，我们还应该在 HTML 标题中包含以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

这 initial-scale=1 可确保移动设备上的浏览器不会在页面上“放大”/缩小，并允许内容自然流动。