CMS help pages
  
You are here: Home > Developers > Template examples > Multiple images across page

Multiple images across page

Aspect ratios can be a problem with this type of template. You put a warning that all images should have the same aspect ratio but it gets ignored, resulting in an untidy mess.

One solution is to set the height of the image container and set the overflow to 'hidden'. In this way only the top part of portrait images will be shown, the top part is usually where the action is, e.g. peoples faces.

Example:

<c>
<cms type=imagesource id=img_1>
</c>

<div style="height:150px;overflow:hidden">
<img src="
<cms type=imagetarget id=img_1>" width=200>
</div>

 

Mixed aspect ratios look a mess

 

Cropping the image height using CSS tidies things up