Php 带图像和滚动条的Bootstrap 3模式

我有一个模态对话框，它有一个宽度为1500px的图像。我希望图像始终保持该大小，如果屏幕尺寸较小，我希望使用滚动条显示模式，即它应该保持自适应，但必须显示滚动条。因此，用户可以通过滚动模态体看到整个图像

我的情态：

Modal::begin([
        'header' => Yii::t('app', ''),
        'id' => 'mapModalId',
        'class' =>'modal',           
    ]);

    echo $this->render('/site/map');

    Modal::end();

/site/map.php

 <img src="<?=Yii::getAlias('@web')."/images/map.png"?>" alt=""> 

“alt=”“>

---

如果您能提供演示，我将不胜感激。

这其中有两个关键部分，完全是用CSS实现的

设置图像的宽度和高度+覆盖最有可能应用于所有图像的最大宽度：100%css规则。这确保图像将以您选择的大小显示（1500px）

将模态体（或保存图像的任何容器）设置为具有“overflow:scroll”属性。这使得图像不会溢出到外层空间，而是在图像容器中添加一个滚动条

这是一个使用默认BS3模式的代码笔，在模式主体中放置了尺寸为1500x500的图像

您需要的CSS如下所示。当然，将modal body类更改为图像所在的任何容器

.modal-body {
  overflow: scroll;
}
/* overrides the max-width: 100% that you may have on all images */
.modal-body img {
  max-width: auto;
}