如何使这个图像响应？

Question

我想在手机/平板电脑（游戏跟踪服务器）的响应中制作这个html代码。

<a href="http://www.gametracker.com/server_info/93.119.24.6:9075/" target="_blank">
<img src="http://cache.gametracker.com/server_info/93.119.24.6:9075/b_350_20_000000_000000_CE0808_000000.png" border="0" width="350" height="20" alt=""/></a>
</center>
<a <a href="http://www.gametracker.com/server_info/93.119.27.78:27015/" target="_blank">
<img src="http://cache.gametracker.com/server_info/93.119.27.78:27015/b_350_20_000000_000000_DA1111_000000.png" border="0" width="350" height="20" alt=""/></a>

看起来我不喜欢：

Answer 1

使用Bootstrap前端框架

<img src="..." class="img-fluid" alt="Responsive image">

或者您可以自己定义课程

.responsive-img {
    max-width: 100%; 
    display:block; 
    height: auto;
}

Answer 2

通过将这些行添加到HTML

中来链接引导程序

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script>

并使用以下代码进行响应式img

<img class="img-responsive" style="margin:auto; padding:20px;" src="image_url" alt="Alternate Text" width="image_width" height="image_height">