Let the field size itself.

Pull the sizing information directly from the position instead of the field when relaying to content.  Also use margin instead of padding to center things.  This makes some progress towards the styling work to apply position styles somewhere useful.

public/frontend_js/contents/graphic.js

@@ -60,18 +60,17 @@ concerto.frontend.Content.Graphic.prototype.load_ = function() {
 
 /**
  * Called when the image finishes loading.
- * Put some padding on the div to center the image before showing it.
+ * Put some margin on the div to center the image before showing it.
  * @param {goog.events.EventType} e The finish event.
  * @private
  */
 concerto.frontend.Content.Graphic.prototype.loaderFinish_ = function(e) {
   var image = e.target;
   goog.dom.appendChild(this.div_, image);
 
-  var side_padding = (this.field_width_ - image.width) / 2;
-  var top_padding = (this.field_height_ - image.height) / 2;
-  goog.style.setStyle(this.div_, 'padding',
-      top_padding + 'px ' + side_padding + 'px');
-
+  var side_margin = (this.field_width_ - image.width) / 2;
+  var top_margin = (this.field_height_ - image.height) / 2;
+  goog.style.setStyle(this.div_, 'margin',
+      top_margin + 'px ' + side_margin + 'px');
   this.finishLoad();
 };

public/frontend_js/field.js

@@ -110,7 +110,6 @@ concerto.frontend.Field.prototype.createDiv = function() {
   if (!goog.isDefAndNotNull(this.div_)) {
     var properties = {'id': 'field_' + this.id, 'class': 'field'};
     var div = goog.dom.createDom('div', properties);
-    goog.style.setSize(div, '100%', '100%');
     this.position.inject(div);
     this.div_ = div;
   }
@@ -153,7 +152,7 @@ concerto.frontend.Field.prototype.loadContent = function(start_load) {
         };
 
         obj.field = {
-          'size': goog.style.getSize(this.div_)
+          'size': this.position.getSize()
         };
 
         this.next_content_ = new contents[obj.type](obj);

public/frontend_js/position.js

@@ -141,6 +141,15 @@ concerto.frontend.Position.prototype.draw = function() {
 };
 
 
+/**
+ * Get the size of the position.
+ * @return {!goog.math.Size} Object with width/height properties.
+ */
+concerto.frontend.Position.prototype.getSize = function() {
+  return goog.style.getSize(this.div_);
+};
+
+
 /**
  * Inset a div into the position.
  * We treat the position div as a private variable,