引導3模態與圖像和滾動條

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中。

1. 設置圖像的寬度和高度+覆蓋最大寬度：你最有可能應用到所有圖片100％的CSS規則。這可確保圖像以您選擇的尺寸顯示（1500px）

2. 設置模態體（或任何容器持有圖像）具有「overflow：scroll」屬性。這使得圖像不會溢出到空間中，而是向圖像容器添加滾動條。

這是一個codepen使用默認的BS3模態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; 
}