Image size posted from OpenLayers 3 to MapServer

Question

I have the following map file

MAP
  PROJECTION
    "init=epsg:4326"
  END # PROJECTION

  FONTSET "H:/mapserver/data/fonts/fonts.list"
  EXTENT 19 33 30 42
  IMAGETYPE "png24"
  NAME "airways"
  SIZE 1280 1024  

  WEB
    METADATA
      "wms_title" "Airways"
      "wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe/wfs?"
      "wms_enable_request" "*"
      "wms_srs" "EPSG:4326"
      "wms_format" "image/png"
    END
  END #WEB

  LAYER
    NAME "airways"
    DATA "H:/mapserver/data/airways.shp"    
    TYPE LINE
    LABELITEM "NAME"
      PROJECTION
        "init=epsg:4326"
      END # PROJECTION

    CLASS
      NAME "airways"
      LABEL
        COLOR 255 255 255
        TYPE TRUETYPE
        FONT Vera
        SIZE 7
        ANTIALIAS TRUE
        POSITION CC
        ANGLE AUTO      

        STYLE
          GEOMTRANSFORM 'labelpoly'
          COLOR 0 0 0
        END # STYLE     
      END # end of label

      STYLE
        COLOR 0 0 0
        WIDTH 0.25
      END # STYLE
    END # CLASS

  END # LAYER

END # MAP

and I'm using Openlayers 3 with following code

function Initialise() {  

  var sourceMQ = new ol.source.MapQuest({layer: 'osm'});
  var layerMQ = new ol.layer.Tile({source: sourceMQ});  

  var wmsSource = new ol.source.ImageWMS({
    url: 'http://localhost/cgi-bin/mapserv.exe?',
    params: {
      'SERVICE':'WMS',
      'map': 'H:/mapserver/data/airways.map',
      'LAYERS': 'airways',
      'VERSION':'1.3.0',
      'REQUEST':'GetMap',
      'FORMAT':"image/png",
      'TRANSPARENT':'true',
      'CRS':'EPSG:4326',
      'STYLES':'',
      'WIDTH':'1920',
      'HEIGHT':'1200',
      'BBOX':'19, 34, 29, 42'
    },
    serverType: 'mapserver'
  });
  var wmsLayer = new ol.layer.Image({
    source: wmsSource
  });

  var view = new ol.View({
    projection: 'EPSG:4326',
    center: [23.48, 37.55],
    zoom: 7
  });  

  var map = new ol.Map({
    target: 'map',
    layers: [layerMQ, wmsLayer],
    view: view,
    controls: ol.control.defaults().extend([
      new ol.control.ScaleLine({units: 'nautical'})
    ]) 
  });  

  map.on('pointermove', getCoordinates);
}

function getCoordinates(evt) {
  var out = ol.coordinate.toStringHDMS(evt.coordinate);
  $('#coordinates').text(out);
}

The html code is

<h1>Open layers test</h1>
<hr>
<div id="map" class="map"></div>
<div id="coordinates"></div>

The css file that I use is

.map 
  {
     height: 800px;
     width: 1300px;
     border: red thin solid;
  }

  #coordinates {
    width: 100%;
    height: 25px;
  }

The request send to mapserver captured from Chrome developers tools is the following

http://localhost/cgi-bin/mapserv.exe?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&map=H:/mapserver/data/airways.map&LAYERS=airways&CRS=EPSG:4326&STYLES&WIDTH=1950&HEIGHT=1200&BBOX=29.970703125,14.23828125,43.154296875,35.66162109375

The image size that is requested is 1950 by 1200 but the div that the map lies in is 1300 by 800. If the div width is increased then the requested image width exceeds 2048 which is the maximum image dimension for mapserver. Also WIDTH and HEIGHT that are set in params in javascript are ignored.

So my question is how openlayers create the width and height request that is send to mapserver and how can I make openlayers send a request regarding width and height in correct limits.

Answer 1

Always study the manual (I have to repeat it twice everyday to myself) http://openlayers.org/en/v3.7.0/apidoc/ol.source.ImageWMS.html

In ol.source.ImageWMS(opt_options) parameter ratio does the trick. As stated

1 means image requests are the size of the map viewport, 2 means twice the size of the map viewport, and so on. Default is 1.5.