Skip to content

Remove gray border around aspect-ratio layouts in Safari and Chrome #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Dec 27, 2017
Merged

Remove gray border around aspect-ratio layouts in Safari and Chrome #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
97a7335
Update full-bleed-16x9.html
ooloth Jun 21, 2017
dcf6e11
Update full-bleed-4x6.html
ooloth Jun 21, 2017
34c68ff
Update full-bleed-5x7.html
ooloth Jun 21, 2017
04e0706
Update full-bleed-5x8.html
ooloth Jun 21, 2017
c49202a
Update full-bleed-6x4.html
ooloth Jun 21, 2017
fa50ef0
Update full-bleed-7x5.html
ooloth Jun 21, 2017
a161cb8
Update full-bleed-8x5.html
ooloth Jun 21, 2017
811a8cd
Update full-bleed-9x16.html
ooloth Jun 21, 2017
11bb6d7
Update full-bleed-6x4.html
ooloth Jun 21, 2017
c1675d9
Update full-bleed-5x8.html
ooloth Jun 21, 2017
db521db
Update full-bleed-5x7.html
ooloth Jun 21, 2017
07c4760
Update full-bleed-4x6.html
ooloth Jun 21, 2017
12ea006
Update full-bleed-16x9.html
ooloth Jun 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 40 additions & 40 deletions src/components/layout/full-bleed-16x9.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,122 +8,122 @@
<main class="cf w-100">
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--16x9">
<img style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
</main>
80 changes: 40 additions & 40 deletions src/components/layout/full-bleed-4x6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,122 +8,122 @@
<main class="cf w-100">
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
<div class="fl w-50 w-third-m w-25-ns">
<div class="aspect-ratio aspect-ratio--4x6">
<img style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
class="db bg-center cover aspect-ratio--object" />
<div style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
class="bg-center cover aspect-ratio--object"></div>
</div>
</div>
</main>
Loading