How to: Use a CSS Selector

This guide will walk users through how to use CSS and more specifically a CSS Selector to resize an image.

CSS Styling for an image within a custom field. Useful for dynamic images that are various sizes.

Use a selector to set dimensions for specific HTML entities such as div.class1 img

template.html

<style type="text/css">div.class1{
  max-width: 400px;
  max-height: 400px
}

div.class1 img {
  width: 100%;
  height: 100%;
}
</style>
<div class="class1">{{{!Objectname.fieldname}}}</div>

Understanding the Source

In the above code block we provide our <div> with a class class1.

<div class="class1">{{{!Objectname.fieldname}}}</div>

The template is being populated with an image stored in a field, meaning we have a rich text field that will require 3 curly braces. The Selector will set the width and height of any image <img> to its full value that is found within a <div> with class class1.