I have split a single SVG image into parts and placed them in a single row of a CSS flexbox. The goal is to keep a constant height but allow the width to change. I can horizontally stretch parts certain parts of the image without causing aspect ratio issues while leaving the other parts constant.
The issue is that, specifically in firefox, a seam is visible between the adjacent SVG images:
https://i.imgur.com/DK8cz78.png
HTML:
CSS:
.gb-top-border{
width: 70%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
}
.gb-top-border-column-fix {
flex: 0 0 auto;
display: flex;
}
.gb-top-border-column-flex-1 {
flex: 10 10 auto;
display: flex;
}
.gb-top-border-column-flex-2 {
flex: 5 5 auto;
display: flex;
min-width: 0;
}
.gb-img-vfill {
width: 100%;
max-height: 100px;
}
.gb-img-top {
max-height: 100px;
}
Here is a live demo showing the flexbox with padding and without: https://codepen.io/ScottMastro/pen/mdpmwEyblondedata
I think this might be just an unavoidable feature of firefox so I've given thought to workarounds. If I can horizontally stretch the second and fourth segments of the image slightly beyond the boundary of their div containers, it will prevent a seam. I have not been able to come up with CSS capable of doing this.
I have split a single SVG image into parts and placed them in a single row of a CSS flexbox. The goal is to keep a constant height but allow the width to change. I can horizontally stretch parts certain parts of the image without causing aspect ratio issues while leaving the other parts constant.
The issue is that, specifically in firefox, a seam is visible between the adjacent SVG images:
https://i.imgur.com/DK8cz78.png
HTML:
<div class="gb-top-border">
<div class="gb-top-border-column-fix">
<img src="https://svgshare.com/i/feD.svg" class="gb-img-top">
</div>
<div class="gb-top-border-column-flex-1">
<img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill">
</div>
<div class="gb-top-border-column-fix">
<img src="https://svgshare.com/i/fgL.svg" class="gb-img-top">
</div>
<div class="gb-top-border-column-flex-2">
<img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill">
</div>
<div class="gb-top-border-column-fix">
<img src="https://svgshare.com/i/fff.svg" class="gb-img-top"></div>
</div>
CSS:
.gb-top-border{
width: 70%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
}
.gb-top-border-column-fix {
flex: 0 0 auto;
display: flex;
}
.gb-top-border-column-flex-1 {
flex: 10 10 auto;
display: flex;
}
.gb-top-border-column-flex-2 {
flex: 5 5 auto;
display: flex;
min-width: 0;
}
.gb-img-vfill {
width: 100%;
max-height: 100px;
}
.gb-img-top {
max-height: 100px;
}
Here is a live demo showing the flexbox with padding and without: [http://example.com https://codepen.io/ScottMastro/pen/mdpmwEy][https://www.blackshowhair.com/collections/613-blonde-hair blonde][http://example.com data]
I think this might be just an unavoidable feature of firefox so I've given thought to workarounds. If I can horizontally stretch the second and fourth segments of the image slightly beyond the boundary of their div containers, it will prevent a seam. I have not been able to come up with CSS capable of doing this.
