Question

我有模态对话框，其中有一个宽度为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="">

如果你能提供演示，我会很感激。

Answer 1

这有两个关键部分，它完全发生在CSS中。

设置图像的宽度和高度+覆盖最有可能应用于所有图像的max-width：100％css规则。这样可确保图像以您选择的尺寸显示（1500px）
设置模态体（或任何容纳图像的容器）的属性为“overflow：scroll”。这使得图像不会溢出到外太空，而是向图像容器添加滚动条。

这是一个使用默认BS3模式的codepen w /尺寸为1500x500的图像放置在模态体中。

http://codepen.io/anon/pen/XXZQzx

您需要的CSS如下。当然，将模态体的类更改为您拥有图像的任何容器。

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

Bootstrap 3 Modal带图像和滚动条

1 个答案: