Jquery 如何进行响应性图像设计

我有以下代码在桌面上显示图像

<div class="medium-5 large-12 columns">
  <img style="padding-top: 20px;padding-left:30px" src="~/assets/img/ty-desktop.png" alt="Back" />      
</div>

我有不同的图像需要在iPad上查看相同的网页时显示到这个

我该怎么做

我试图更改

class=“medium-4”

但图像没有调整大小并丢失像素。所以我为iPad创建了新的图像，我需要加载该图像

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

---

一种方法是，默认情况下，只需隐藏ipad图像，然后通过要针对ipad设备的媒体查询来启用它

这里有一个资源，用于各种设备/方向的媒体查询

.iPad{
显示：无；
}
/*替换为ipad的媒体查询*/
@介质（最大宽度：800px）{
.桌面{
显示：无；
}
.iPad{
显示：块；
}
}

如果你真的发布你的代码，帮助你会更容易。那些类别“中5”、“大12”代表什么？post code（如果可能）Medium-5和large-12是引导列。这是响应性设计当您在每个分辨率上显示相同的文件时，它没有响应性，您需要为不同的分辨率分配不同的文件如果这些是引导类，它们将是

col-md-5

和

col-lg-12

。但是，由于类名不匹配，而且您在问题中没有说您正在使用引导，我们需要检查原始代码。对于html5本机包含的一个简单问题，这是一个过火的解决方案，但它是正确的。仅对图像而言，这是过分的，但您可以将其用于更复杂的场景structures@EduardVoid同意。这只是另一种方式，这就是我想要的。非常感谢：）谢谢分享。我已经在我的另一页中实现了这一点。