Skip to content

Commit de9f923

Browse files
johnojohno
authored
Merge pull request #156 from ooloth/Remove-gray-border-around-aspect-object-image-in-Safari-and-Chrome-by-changing-img-tag-to-div-tag
Remove gray border around aspect-ratio layouts in Safari and Chrome
2 parents 11d2a11 + 12ea006 commit de9f923

File tree

8 files changed

+320
-320
lines changed

8 files changed

+320
-320
lines changed

‎src/components/layout/full-bleed-16x9.html‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,122 +8,122 @@
88
<main class="cf w-100">
99
<div class="fl w-50 w-third-m w-25-ns">
1010
<div class="aspect-ratio aspect-ratio--16x9">
11-
<img style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
12-
class="db bg-center cover aspect-ratio--object" />
11+
<div style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
12+
class="bg-center cover aspect-ratio--object"></div>
1313
</div>
1414
</div>
1515
<div class="fl w-50 w-third-m w-25-ns">
1616
<div class="aspect-ratio aspect-ratio--16x9">
17-
<img style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
18-
class="db bg-center cover aspect-ratio--object" />
17+
<div style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
18+
class="bg-center cover aspect-ratio--object"></div>
1919
</div>
2020
</div>
2121
<div class="fl w-50 w-third-m w-25-ns">
2222
<div class="aspect-ratio aspect-ratio--16x9">
23-
<img style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
24-
class="db bg-center cover aspect-ratio--object" />
23+
<div style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
24+
class="bg-center cover aspect-ratio--object"></div>
2525
</div>
2626
</div>
2727
<div class="fl w-50 w-third-m w-25-ns">
2828
<div class="aspect-ratio aspect-ratio--16x9">
29-
<img style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
30-
class="db bg-center cover aspect-ratio--object" />
29+
<div style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
30+
class="bg-center cover aspect-ratio--object"></div>
3131
</div>
3232
</div>
3333
<div class="fl w-50 w-third-m w-25-ns">
3434
<div class="aspect-ratio aspect-ratio--16x9">
35-
<img style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
36-
class="db bg-center cover aspect-ratio--object" />
35+
<div style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
36+
class="bg-center cover aspect-ratio--object"></div>
3737
</div>
3838
</div>
3939
<div class="fl w-50 w-third-m w-25-ns">
4040
<div class="aspect-ratio aspect-ratio--16x9">
41-
<img style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
42-
class="db bg-center cover aspect-ratio--object" />
41+
<div style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
42+
class="bg-center cover aspect-ratio--object"></div>
4343
</div>
4444
</div>
4545
<div class="fl w-50 w-third-m w-25-ns">
4646
<div class="aspect-ratio aspect-ratio--16x9">
47-
<img style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
48-
class="db bg-center cover aspect-ratio--object" />
47+
<div style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
48+
class="bg-center cover aspect-ratio--object"></div>
4949
</div>
5050
</div>
5151
<div class="fl w-50 w-third-m w-25-ns">
5252
<div class="aspect-ratio aspect-ratio--16x9">
53-
<img style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
54-
class="db bg-center cover aspect-ratio--object" />
53+
<div style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
54+
class="bg-center cover aspect-ratio--object"></div>
5555
</div>
5656
</div>
5757
<div class="fl w-50 w-third-m w-25-ns">
5858
<div class="aspect-ratio aspect-ratio--16x9">
59-
<img style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
60-
class="db bg-center cover aspect-ratio--object" />
59+
<div style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
60+
class="bg-center cover aspect-ratio--object"></div>
6161
</div>
6262
</div>
6363
<div class="fl w-50 w-third-m w-25-ns">
6464
<div class="aspect-ratio aspect-ratio--16x9">
65-
<img style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
66-
class="db bg-center cover aspect-ratio--object" />
65+
<div style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
66+
class="bg-center cover aspect-ratio--object"></div>
6767
</div>
6868
</div>
6969
<div class="fl w-50 w-third-m w-25-ns">
7070
<div class="aspect-ratio aspect-ratio--16x9">
71-
<img style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
72-
class="db bg-center cover aspect-ratio--object" />
71+
<div style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
72+
class="bg-center cover aspect-ratio--object"></div>
7373
</div>
7474
</div>
7575
<div class="fl w-50 w-third-m w-25-ns">
7676
<div class="aspect-ratio aspect-ratio--16x9">
77-
<img style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
78-
class="db bg-center cover aspect-ratio--object" />
77+
<div style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
78+
class="bg-center cover aspect-ratio--object"></div>
7979
</div>
8080
</div>
8181
<div class="fl w-50 w-third-m w-25-ns">
8282
<div class="aspect-ratio aspect-ratio--16x9">
83-
<img style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
84-
class="db bg-center cover aspect-ratio--object" />
83+
<div style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
84+
class="bg-center cover aspect-ratio--object"></div>
8585
</div>
8686
</div>
8787
<div class="fl w-50 w-third-m w-25-ns">
8888
<div class="aspect-ratio aspect-ratio--16x9">
89-
<img style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
90-
class="db bg-center cover aspect-ratio--object" />
89+
<div style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
90+
class="bg-center cover aspect-ratio--object"></div>
9191
</div>
9292
</div>
9393
<div class="fl w-50 w-third-m w-25-ns">
9494
<div class="aspect-ratio aspect-ratio--16x9">
95-
<img style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
96-
class="db bg-center cover aspect-ratio--object" />
95+
<div style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
96+
class="bg-center cover aspect-ratio--object"></div>
9797
</div>
9898
</div>
9999
<div class="fl w-50 w-third-m w-25-ns">
100100
<div class="aspect-ratio aspect-ratio--16x9">
101-
<img style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
102-
class="db bg-center cover aspect-ratio--object" />
101+
<div style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
102+
class="bg-center cover aspect-ratio--object"></div>
103103
</div>
104104
</div>
105105
<div class="fl w-50 w-third-m w-25-ns">
106106
<div class="aspect-ratio aspect-ratio--16x9">
107-
<img style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
108-
class="db bg-center cover aspect-ratio--object" />
107+
<div style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
108+
class="bg-center cover aspect-ratio--object"></div>
109109
</div>
110110
</div>
111111
<div class="fl w-50 w-third-m w-25-ns">
112112
<div class="aspect-ratio aspect-ratio--16x9">
113-
<img style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
114-
class="db bg-center cover aspect-ratio--object" />
113+
<div style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
114+
class="bg-center cover aspect-ratio--object"></div>
115115
</div>
116116
</div>
117117
<div class="fl w-50 w-third-m w-25-ns">
118118
<div class="aspect-ratio aspect-ratio--16x9">
119-
<img style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
120-
class="db bg-center cover aspect-ratio--object" />
119+
<div style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
120+
class="bg-center cover aspect-ratio--object"></div>
121121
</div>
122122
</div>
123123
<div class="fl w-50 w-third-m w-25-ns">
124124
<div class="aspect-ratio aspect-ratio--16x9">
125-
<img style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
126-
class="db bg-center cover aspect-ratio--object" />
125+
<div style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
126+
class="bg-center cover aspect-ratio--object"></div>
127127
</div>
128128
</div>
129129
</main>

‎src/components/layout/full-bleed-4x6.html‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,122 +8,122 @@
88
<main class="cf w-100">
99
<div class="fl w-50 w-third-m w-25-ns">
1010
<div class="aspect-ratio aspect-ratio--4x6">
11-
<img style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
12-
class="db bg-center cover aspect-ratio--object" />
11+
<div style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
12+
class="bg-center cover aspect-ratio--object"></div>
1313
</div>
1414
</div>
1515
<div class="fl w-50 w-third-m w-25-ns">
1616
<div class="aspect-ratio aspect-ratio--4x6">
17-
<img style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
18-
class="db bg-center cover aspect-ratio--object" />
17+
<div style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
18+
class="bg-center cover aspect-ratio--object"></div>
1919
</div>
2020
</div>
2121
<div class="fl w-50 w-third-m w-25-ns">
2222
<div class="aspect-ratio aspect-ratio--4x6">
23-
<img style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
24-
class="db bg-center cover aspect-ratio--object" />
23+
<div style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
24+
class="bg-center cover aspect-ratio--object"></div>
2525
</div>
2626
</div>
2727
<div class="fl w-50 w-third-m w-25-ns">
2828
<div class="aspect-ratio aspect-ratio--4x6">
29-
<img style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
30-
class="db bg-center cover aspect-ratio--object" />
29+
<div style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
30+
class="bg-center cover aspect-ratio--object"></div>
3131
</div>
3232
</div>
3333
<div class="fl w-50 w-third-m w-25-ns">
3434
<div class="aspect-ratio aspect-ratio--4x6">
35-
<img style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
36-
class="db bg-center cover aspect-ratio--object" />
35+
<div style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
36+
class="bg-center cover aspect-ratio--object"></div>
3737
</div>
3838
</div>
3939
<div class="fl w-50 w-third-m w-25-ns">
4040
<div class="aspect-ratio aspect-ratio--4x6">
41-
<img style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
42-
class="db bg-center cover aspect-ratio--object" />
41+
<div style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
42+
class="bg-center cover aspect-ratio--object"></div>
4343
</div>
4444
</div>
4545
<div class="fl w-50 w-third-m w-25-ns">
4646
<div class="aspect-ratio aspect-ratio--4x6">
47-
<img style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
48-
class="db bg-center cover aspect-ratio--object" />
47+
<div style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
48+
class="bg-center cover aspect-ratio--object"></div>
4949
</div>
5050
</div>
5151
<div class="fl w-50 w-third-m w-25-ns">
5252
<div class="aspect-ratio aspect-ratio--4x6">
53-
<img style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
54-
class="db bg-center cover aspect-ratio--object" />
53+
<div style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
54+
class="bg-center cover aspect-ratio--object"></div>
5555
</div>
5656
</div>
5757
<div class="fl w-50 w-third-m w-25-ns">
5858
<div class="aspect-ratio aspect-ratio--4x6">
59-
<img style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
60-
class="db bg-center cover aspect-ratio--object" />
59+
<div style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
60+
class="bg-center cover aspect-ratio--object"></div>
6161
</div>
6262
</div>
6363
<div class="fl w-50 w-third-m w-25-ns">
6464
<div class="aspect-ratio aspect-ratio--4x6">
65-
<img style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
66-
class="db bg-center cover aspect-ratio--object" />
65+
<div style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
66+
class="bg-center cover aspect-ratio--object"></div>
6767
</div>
6868
</div>
6969
<div class="fl w-50 w-third-m w-25-ns">
7070
<div class="aspect-ratio aspect-ratio--4x6">
71-
<img style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
72-
class="db bg-center cover aspect-ratio--object" />
71+
<div style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
72+
class="bg-center cover aspect-ratio--object"></div>
7373
</div>
7474
</div>
7575
<div class="fl w-50 w-third-m w-25-ns">
7676
<div class="aspect-ratio aspect-ratio--4x6">
77-
<img style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
78-
class="db bg-center cover aspect-ratio--object" />
77+
<div style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
78+
class="bg-center cover aspect-ratio--object"></div>
7979
</div>
8080
</div>
8181
<div class="fl w-50 w-third-m w-25-ns">
8282
<div class="aspect-ratio aspect-ratio--4x6">
83-
<img style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
84-
class="db bg-center cover aspect-ratio--object" />
83+
<div style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
84+
class="bg-center cover aspect-ratio--object"></div>
8585
</div>
8686
</div>
8787
<div class="fl w-50 w-third-m w-25-ns">
8888
<div class="aspect-ratio aspect-ratio--4x6">
89-
<img style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
90-
class="db bg-center cover aspect-ratio--object" />
89+
<div style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
90+
class="bg-center cover aspect-ratio--object"></div>
9191
</div>
9292
</div>
9393
<div class="fl w-50 w-third-m w-25-ns">
9494
<div class="aspect-ratio aspect-ratio--4x6">
95-
<img style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
96-
class="db bg-center cover aspect-ratio--object" />
95+
<div style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
96+
class="bg-center cover aspect-ratio--object"></div>
9797
</div>
9898
</div>
9999
<div class="fl w-50 w-third-m w-25-ns">
100100
<div class="aspect-ratio aspect-ratio--4x6">
101-
<img style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
102-
class="db bg-center cover aspect-ratio--object" />
101+
<div style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
102+
class="bg-center cover aspect-ratio--object"></div>
103103
</div>
104104
</div>
105105
<div class="fl w-50 w-third-m w-25-ns">
106106
<div class="aspect-ratio aspect-ratio--4x6">
107-
<img style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
108-
class="db bg-center cover aspect-ratio--object" />
107+
<div style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
108+
class="bg-center cover aspect-ratio--object"></div>
109109
</div>
110110
</div>
111111
<div class="fl w-50 w-third-m w-25-ns">
112112
<div class="aspect-ratio aspect-ratio--4x6">
113-
<img style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
114-
class="db bg-center cover aspect-ratio--object" />
113+
<div style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
114+
class="bg-center cover aspect-ratio--object"></div>
115115
</div>
116116
</div>
117117
<div class="fl w-50 w-third-m w-25-ns">
118118
<div class="aspect-ratio aspect-ratio--4x6">
119-
<img style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
120-
class="db bg-center cover aspect-ratio--object" />
119+
<div style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
120+
class="bg-center cover aspect-ratio--object"></div>
121121
</div>
122122
</div>
123123
<div class="fl w-50 w-third-m w-25-ns">
124124
<div class="aspect-ratio aspect-ratio--4x6">
125-
<img style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
126-
class="db bg-center cover aspect-ratio--object" />
125+
<div style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
126+
class="bg-center cover aspect-ratio--object"></div>
127127
</div>
128128
</div>
129129
</main>

0 commit comments

Comments
 (0)