diff --git a/layouts/shortcodes/codepen.html b/layouts/shortcodes/codepen.html
index ee58c233..4dbc14b7 100644
--- a/layouts/shortcodes/codepen.html
+++ b/layouts/shortcodes/codepen.html
@@ -1 +1 @@
-<iframe height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}" style="width: 100%;" scrolling="no" src="https://codepen.io/{{ .Get "username" }}/embed/{{ .Get "id" }}/?height={{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}&amp;theme-id=light&amp;default-tab={{ .Get "left-tab" }}{{ if .Get "right-tab" }},{{ .Get "right-tab" }}{{ end }}" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>
+<iframe height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}" style="width: 100%;" scrolling="no" src="https://codepen.io/{{ .Get "username" }}/embed/{{ .Get "id" }}/?height={{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}&amp;theme-id=light&amp;default-tab={{ .Get "left-tab" }}{{ if .Get "right-tab" }},{{ .Get "right-tab" }}{{ end }}"></iframe>
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index 769c6008..b2bd1a73 100644
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -24,8 +24,9 @@
 
 {{- $image := .Scratch.Get "image" -}}
 
+{{- $origRatio := (div (float $image.Height) $image.Width) }}
 {{- $displayWidth := $setWidth -}}
-{{- $displayHeight := (math.Round (div $image.Height 2)) -}}
+{{- $displayHeight := (math.Ceil (mul $origRatio $setWidth)) -}}
 
 {{- if .Get "caption" -}}
 <figure>