Javascript 引导：popover内的图像超出了窗口大小

我目前正在使用Bootstrap3Popover功能在点击按钮时显示图例

图例是一个图像文件，我想在弹出窗口中显示该图像

但是图像宽度超出了popover窗口的宽度

即使给定width属性，也不会更改popover窗口的宽度

非常感谢你的帮助

HTML

<button id="btnLegend" class="btn btn-warning" data-toggle="popover">Legend</button>

图例

Javascript

$(function () {
    $('#btnLegend').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         'container':'body'
        }
    );
});

$（函数（）{
$（'btnLegend'）.popover(
{'placement'：'bottom'，
“内容”：“，
“标题”：“弹出测试”，
“html”：是，
“容器”：“主体”
}
);
});

---

这是我的

你应该给img标签加上宽度

这是一个例子

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\" style='width:100%' >",
         'title':'Popup Test',
         'html':true
        }
    );
});

---

以下是更新的链接，我使用此解决方案

var$btn=$（“#my_btn”）；
$btn.popover({
内容：“”，
是的，
触发器：“悬停”，
位置：'左'，
容器：“主体”
})
.on（“show.bs.popover”），函数（e）{
$（e.target.data（“bs.popover”）.tip（）.css（{“max width”：$btn.data（“width”）+50+“px”}）；
});

如果不想更改图像的宽度，则可以设置popover类的

最大宽度

或

最小宽度

属性。 例：

或

但是如果改变图像宽度不是问题，那么只需将图像宽度设置为100%。 例：

---

popover的宽度限制为其容器宽度的100%。将其设置为body，它将更宽：

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         /* Set the container for the popover (e.g. body) */
         container: 'body'    
        }
    );
});

$（函数（）{
$（“#示例”）.popover(
{'placement'：'bottom'，
“内容”：“，
“标题”：“弹出测试”，
“html”：是，
/*设置popover的容器（例如车身）*/
容器：“主体”
}
);
});

---

查看Anil的答案以了解更多信息。

只需通过CSS限制图像和框：

.popover {
    max-width:350px;   
}

.popover img {
    max-width: 250px;
}

---

指向小提琴的链接显示不同的代码。我不想改变图像的大小。我需要扩展popover窗口的大小，以使图像与其原始大小相适应。你有办法解决这个问题吗？@VSri58如果你不想更改要固定的图像的宽度，那么请更改popover的最大宽度

。popover{max width:1000px！重要；}

.popover{
    min-width:80%;   
}

img{
       width: 100%;
    }

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         /* Set the container for the popover (e.g. body) */
         container: 'body'    
        }
    );
});

.popover {
    max-width:350px;   
}

.popover img {
    max-width: 250px;
}