Slides of my Litmus Live #EmailHacks session about relative heights on background images based on the viewport width

1. VW to the rescue!

2. Wilbert Heinen
Emaildeveloper
e-Village, creators of Clang
@wilbertheinen
w.heinen@e-village.nl
linkedin.com/in/wilbertheinen

3. .image {
background: url(bgimage.jpg);
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

4. .image {
background: url(bgimage.jpg);
width: 100%;
height: 50%;
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

5. With vw/vh, we can size elements
to be relative to the size of the
viewport.

6. .image {
background: url(bgimage.jpg);
height: calc(50 * 1vw);
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

7. The vw/vh units are interesting in
that 1 unit reflects 1/100th the width
of the viewport.

8. .image {
background: url(bgimage.jpg);
height: calc(50vw);
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

10. .image {
background: url(bgimage.jpg);
height: 50vw;
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

13. .image {
background: url(bgimage.jpg);
width: 100vw;
height: 50vw;
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

15. Is VW our only hope?

16. .image {
background: url(bgimage.jpg);
padding-bottom: 50%;
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

17. .image {
background: url(bgimage.jpg);
width: 100vw;
padding-bottom: 50vw;
}
.image img {
display: none !important;
}
...
<div class="image">
<img src="image.jpg" />
</div>

20. - height: 50vw has better support than height: calc(50vw)
- When using vw for height you need to add a width of 100vw, because of the
Gmail Apps
- You can also use a basic padding-bottom: 50% or 50vw

21. THANKS!Code Examples: https://litmus.com/builder/16649b6