Javascript 如何使图像响应移动视图

我在代码中使用了两列，一列用于图像，另一列用于该图像的描述。当我以移动视图的形式执行我的站点时，我的图像只显示了它的一半。当我使用col-sm-6时，两个容器的高度都增加了很多，并且在较低的容器和当前容器之间显示了额外的间隙。我也试过“最大宽度：100%；”和“高度：自动；”但它位于图片底部的内容显示旁边

注意：当我同时使用col-sm-5时，页面左侧区域为空

HTML

JS

---

您正在对图像使用

背景图像

，因此

最大宽度：100%

将不起任何作用…使用

背景尺寸：封面

var h = $('.expert .col-sm-5').height();
$('.expert .col-sm-6 div').height(function(index, height) {
  return (h);
});

您还需要更改jQuery以计算

height（）

var h = $('.expert .col-sm-5').height();
$('.expert .col-sm-6 div').height(function(index, height) {
  return (h);
});

---

这是因为类img responsive将被赋予包含标签的图像

.expert .bg-img {
  background-image: url(../images/web.png);
  background-size: 100%;
  height: auto;
  background-position:left;
  background-size:cover;
}

试着像这样改变它

var h = $('.expert .col-sm-5').height();
$('.expert .col-sm-6 div').height(function(index, height) {
  return (h);
});

.expert .bg-img {
  background-image: url(../images/web.png);
  background-size: 100%;
  height: auto;
  background-position:left;
  background-size:cover;
}