unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

image in news listing not wide enough #746

Closed dkevey closed 7 years ago

dkevey commented 8 years ago

Expected behaviour

Using the 5 col block listing images were cropped at a ratio of 3:2 and now with 4 col display they seem to work better at a ratio of 2:1 however there are legacy news and event items that are now displaying with white space to the right.

Actual behaviour

Images are set to display using max-height=100% which outputs white space.

max-height

Steps to reproduce

Would be better to display using max-width=100% . Images may appear slightly stretched, but if using 3:2 or 2:1 ratio they display ok. image-max-width

tomstringer commented 8 years ago

Have added a temp fix in MCE:

/* Fix image sizes in block-listings https://github.com/marcom-unimelb/unimelb-design-system/issues/746 */
.uomcontent [role="main"] .block-listing .crop-height img { 
    max-height: none; 
    max-width: 100%
}
waitingallday commented 8 years ago

Oh yeah I forgot that one, we're trying to figure out here why the default behaviour is the way it is. Will likely include this in a future update.

axelboc commented 7 years ago

Hmm I don't think this is fixed @waitingallday. Only fix is to use background images. Keeping this one closed in favour of #709, which is the same issue.