Use more consistent background image scaling

Chrome in particular would end up with fairly small and inconsistent
background sizes when using background-size: contain;. This makes sense
according to the docs at
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size, which
doesn't specify that the background actually has to fill the entire element.

background-size: 100% 100%; does force full-size scaling, which is what we
want. Verified to work as expected in Chrome 38 on Linux.

Change-Id: I508e08dac1480491efcd1d27cfac16187bfbd4fe
This commit is contained in:
Gabriel Wicke 2014-10-15 10:03:35 -07:00 committed by GWicke
parent 97d6f8ff89
commit d7954691c1
1 changed files with 2 additions and 1 deletions

View File

@ -379,7 +379,8 @@ class MathMathML extends MathRenderer {
$class = $classOverride;
}
$style = 'background-image: url(\''. $url. '\'); background-repeat: no-repeat; background-size: contain;';
// TODO: move the common styles to the global stylesheet!
$style = 'background-image: url(\''. $url. '\'); background-repeat: no-repeat; background-size: 100% 100%;';
$this->correctSvgStyle( $this->getSvg(), $style );
if ( $class ) { $attribs['class'] = $class; }
if ( $style ) { $attribs['style'] = $style; }