add aspect ratio sizing to images (dojo#114)

src/Common.m.css

@@ -52,3 +52,8 @@
 .sizedSummaryImage {
 	max-height: calc(var(--grid-size) * 33);
 }
+
+.presetAR {
+	height: auto;
+	width: 100%;
+}

src/Common.m.css.d.ts

@@ -5,3 +5,4 @@ export const heading: string;
 export const subheading: string;
 export const centered: string;
 export const sizedSummaryImage: string;
+export const presetAR: string;

src/widgets/BlogListSidePane.tsx

@@ -1,5 +1,6 @@
 import { create, tsx } from '@dojo/framework/core/vdom';
 import * as css from './BlogListSidePane.m.css';
+import * as commonCss from '../Common.m.css';
 import SmallBlogSummary from './SmallBlogSummary';
 import block from '@dojo/framework/core/middleware/block';
 import getBlogPreviews, { BlogPreview } from '../blocks/wp-blog-previews.block';
@@ -34,7 +35,15 @@ export const BlogListSidePane = factory(function BlogListSidePane({ middleware:
 				{{
 					title: preview.title,
 					date: preview.date,
-					image: <img alt="" src={preview.imageSmall} />
+					image: (
+						<img
+							classes={commonCss.presetAR}
+							width="120"
+							height="64"
+							alt=""
+							src={preview.imageSmall}
+						/>
+					)
 				}}
 			</SmallBlogSummary>
 		);

src/widgets/BlogPreviewList.tsx

@@ -1,5 +1,6 @@
 import { create, tsx } from '@dojo/framework/core/vdom';
 import * as css from './BlogPreviewList.m.css';
+import * as commonCss from '../Common.m.css';
 import { BlogSummary } from './BlogSummary';
 import { BlogPreview } from '../blocks/wp-blog-previews.block';
 
@@ -24,7 +25,13 @@ export const BlogPreviewList = factory(function BlogPreviewList({ properties })
 								date: preview.date,
 								blurb: preview.excerpt,
 								image: preview.image && (
-									<img alt={preview.title} src={preview.image} />
+									<img
+										classes={commonCss.presetAR}
+										width="640"
+										height="360"
+										alt={preview.title}
+										src={preview.image}
+									/>
 								)
 							}}
 						</BlogSummary>

src/widgets/pages/Blog.tsx

@@ -52,7 +52,15 @@ export const Blog = factory(function Blog({ properties, middleware: { block } })
 				{{
 					title: preview.title,
 					date: preview.date,
-					image: <img alt="" src={preview.imageSmall} />
+					image: (
+						<img
+							classes={commonCss.presetAR}
+							width="120"
+							height="64"
+							alt=""
+							src={preview.imageSmall}
+						/>
+					)
 				}}
 			</SmallBlogSummary>
 		);
@@ -84,7 +92,13 @@ export const Blog = factory(function Blog({ properties, middleware: { block } })
 									year: 'numeric'
 								})}`}</span>
 							</div>
-							<img src={post.image} />
+							<img
+								classes={commonCss.presetAR}
+								width="640"
+								height="360"
+								alt=""
+								src={post.image}
+							/>
 							<ul classes={css.categoryList}>
 								{post.categories.map(renderCategoryItem)}
 							</ul>

src/widgets/pages/Home.m.css

@@ -89,7 +89,8 @@
 }
 
 .summaryImage {
-	max-width: 80%;
+	height: auto;
+	width: 80%;
 }
 
 @media (max-width: 768px) {

src/widgets/pages/Home.tsx

@@ -111,6 +111,8 @@ export const Home = factory(function Home() {
 						blurb: `High engineering costs and stalled projects are common complaints for many companies. Our approach to creating healthy development organizations will quickly help you identify the “why” of these problems and our team will work to get you back to the business of moving efficiently toward your goals.`,
 						image: (
 							<img
+								width="440"
+								height="480"
 								src={challengingImg}
 								classes={css.summaryImage}
 								alt="illustration of challenging"
@@ -124,6 +126,8 @@ export const Home = factory(function Home() {
 						blurb: `You need a cross-functional team to understand your business and partner with you to define and incorporate strategy, design, and technology into all aspects of your product. Allowing for big-picture thinking to inform decisions in even the smallest details of a project creates and nurtures smart, engaged teams who care about delivering high-quality user experiences, as your web app continues to grow and evolve.`,
 						image: (
 							<img
+								width="440"
+								height="440"
 								src={advisementImg}
 								classes={css.summaryImage}
 								alt="illustration of advisement"
@@ -138,6 +142,8 @@ export const Home = factory(function Home() {
 						image: (
 							<img
 								loading="lazy"
+								width="440"
+								height="440"
 								src={confidenceImg}
 								classes={css.summaryImage}
 								alt="illustration of confidence"
@@ -218,7 +224,9 @@ export const Home = factory(function Home() {
 							),
 							image: (
 								<img
-									classes={css.dependImg}
+									classes={[css.dependImg, commonCss.presetAR]}
+									width="550"
+									height="600"
 									loading="lazy"
 									src={dependImg}
 									alt="illustration of dependability"