如何使图像响应？

在当今世界，移动互联网的使用量正在快速增长，因此网站必须针对不同尺寸的设备进行响应式设计。可以根据设备或浏览屏幕动态改变外观的网站称为响应式网站，即具有响应式设计的网站。

响应式图像只是响应式网站的一部分。可以根据浏览器宽度改变尺寸、放大或缩小尺寸的图像是响应式图像。图像应该响应改善用户在不同尺寸的各种设备上的体验。

如何使图像响应？

使用 CSS：以下是使用 CSS 使图像具有响应性的步骤。

包括以下 HTML元数据 标记到 HTML 文档的头部标记。它将设置视口，根据设备的屏幕宽度调整内容，并在浏览器中以初始缩放级别加载页面。

设置图像属性。为了使图像具有响应性，可以将以下 CSS 属性的 width 应用于图像并将其设置为 100%，以便可以根据浏览器的宽度放大或缩小它。

示例 1：以下示例演示图像响应能力。在下面的输出中，网站包含一个响应式图像，因为图像根据浏览器的宽度放大和缩小。

HTML

  

    

  

    
  
    
Responsive Images
    

        Responsive images are just a part of 
        Responsive websites. Images that can 
        change their dimensions, scaling them
        up or down, according to the browser
        width are responsive images. The above
        image is responsive as it is adjusting 
        itself according to the width of the 
        browser.
    

  

输出：

使用 Bootstrap：以下是使用 Bootstrap 使图像响应的步骤。

将以下 HTML 元标记包含到 HTML 文档的 head 标记中。

在代码的头部包含以下样式表和 Bootstrap 脚本。

使用 Bootstrap 的 bootstrap .img-fluid类来使图像响应。此外，将宽度属性值设置为 100%。

示例 2：在上面的示例中，使用 Bootstrap 使图像具有响应性。

HTML

  

    
    
    
    
    
    

  

    
  
    Responsive Images
    
        Responsive images are just a part of 
        Responsive websites. Images that can 
        change their dimensions, scaling them 
        up or down, according to the browser
        width are responsive images. The above 
        image is responsive as it is adjusting 
        itself according to the width of the
        browser.
    

  

输出：