To try and get some harmony and control on page layouts, we standardize the proportions of the thumbs on most places with the exception of the media carousel (in content), media asides, and Posterboard sprockets. We do this with a CSS variable, --ls-ratio. You can use this, too, to override what we've done.
Although this may vary on older themes, in newer themes have more standardized image proportions. In the Classic List, Gallery, search results, and related stories/mentions; thumbs are constrained to 4:3 proportion. The Carousel sprocket uses the 16:9 proportion. The media carousel thumbs, media gallery thumbs are 1:1 (square).
To convert the proportion to our --ls-value variable, divide the height by the width. Here are some examples:
4:3 is the most common proportion (width of 4, height of 3) like 640x480 or 800x600
3÷4=.75 480÷640=.75 600÷800=.75
--ls-ratio is .75
16:9 is "widescreen", like 1024×576 or 1280×720
9÷16=.5625 576÷1024=.5625 720÷1280=.5625
--ls-ratio = .5625
1:1 is the proportion of a square
--ls-ratio = 1
So, if, for example, you wanted to make sure all the thumbs in your Posterboard sprocket were always constrained to a 4:3 ratio, you would include this in your CSS:
.mp-posterboard .mp-thumb {
--ls-ratio: .75;
}
Comments