通过css或者简单的代码实现图片自适应

Using CSS “max-width” Property

The most commonly used CSS property to make an Image responsive is the max-width property. You can set the value as 100%. You can do this inline by using the style attribute on each image.

The Markup

<body>
    <img src="sparrow.jpg" 
        style="height:auto;
        max-width:100%;
        border:none;
        display:block;"
        alt="" />
</body>

又比如在现有的图片代码里直接添加max-width 属性：
<img src="xxx" style="max-width: 100%;" />

Apply “max-width” Property on Multiple Images using CSS Class

Usually, we have multiple images on a web page or in our application. Its quite obvious that you will want all the image to be responsive. The simplest way to do this is by creating a CSS class, which will apply the max-width property to all the images.

Example code:

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Image using CSS</title>
    <style>
        img.alldevices{
            margin: 0 auto;
            height: auto;
            max-width: 100%;
            border: none;
            display: block;
            padding: 5px 0;
        }
    </style>
</head>
<body>
    <p>Restore down the browser window and drag the browser sideways to make it small and big. 
        It will automatically adjust the images according to the width and height of the browser window.</p>

    <div>
        <img src="https://www.encodedna.com/responsive/responsive-image.png" class="alldevices" alt="sparrow" />
        <img src="https://www.encodedna.com/jquery/demo/MOTORSPORT.jpg" class="alldevices" alt="car" />
    </div>
</body>
</html>

如果模板本身是自适应的，只是图片没有自适应，则找到控制图片的bootstrap css 文件， 添加 max-width: 100%; 代码即可。