Views & colorbox trigger, make the colorbox image adapt to screen size
The colorbox-trigger is normally only required when you want to display HTML in your colorbox. You are then required to set height and width as colorbox is not able to determine the dimensions of the HTML content before it is loaded.

If you want to display an image in a colorbox, there's no need to use the colorbox-trigger but instead just add the image field and use colorbox as image style. Within the field formatter settings of colorbox you can then define the image styles to be used for preview and inside the colorbox. If the colorbox image style exceeds the screen, colorbox will automatically resize the image to fit the screen/window.

In your case, you want to have the image displayed along with custom HTML captions. Thus, you need to define the colorbox content and then set height and width to 100%. The colorbox will then use up maximum available space. However, your image is still not diplayed at 100% width. To achieve that, you would need a quite large image to be displayed in the colorbox, eventually add a wrapper div to it and set a CSS rule like

div.wrapper img { max-width: 100%; }