我已將單個 SVG 影像拆分為多個部分，并將它們放置在 CSS flexbox 的單行中。目標是保持高度不變，但允許寬度改變。我可以水平拉伸影像的某些部分而不會導致縱橫比問題，同時保持其他部分不變。
問題是，特別是在 Firefox 中，相鄰的 SVG 影像之間存在接縫：
.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;
}
.pad {
padding: 5px;
}<div class="gb-top-border">
<div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top pad"></div>
<div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
<div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top pad"></div>
<div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
<div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top pad"></div>
</div>
<br>
<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>這是一個現場演示，展示了帶填充和不帶填充的 flexbox： https ://codepen.io/ScottMastro/pen/mdpmwEy
我認為這可能只是 Firefox 的一個不可避免的功能，所以我已經考慮過解決方法。如果我可以將影像的第二和第四部分水平拉伸到稍微超出其 div 容器的邊界，它將防止出現接縫。我還沒有想出能夠做到這一點的 CSS。
uj5u.com熱心網友回復：
我使用背景圖片而不是 img 標簽，并添加了一些邊距，這樣即使在不同的縮放級別下也不會出現白色接縫。但是，在某些縮放級別下，深棕色區域的頂部邊框在可拉伸部分與在固定寬度部分中看起來可能略有不同。
.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;
}
.pad {
padding: 5px;
}<div class="gb-top-border">
<div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/feD.svg'); height: 100px; width:123px; background-repeat: no-repeat; background-size: auto 102px"></div>
<div class="gb-top-border-column-flex-1" style="background-image:url('https://svgshare.com/i/fge.svg'); height: 100px; margin-left:-1px ; background-size: 7px 102px"></div>
<div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/fgL.svg'); height: 100px; width:224px; background-position: -3px 0; margin-right: -3px; background-repeat: no-repeat;background-size: auto 102px"></div>
<div class="gb-top-border-column-flex-2" style="background-image:url('https://svgshare.com/i/fge.svg'); height: 100px; margin-left:-3px; margin-right: -3px; background-size: 7px 102px"></div>
<div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/fff.svg'); height: 100px; width:59px; background-position: -3px 0; background-repeat: no-repeat; background-size: auto 102px"></div>
</div>
<br>uj5u.com熱心網友回復：
SVG 影像的尺寸不是整數，因此在渲染程序中很可能會出現舍入問題。但是，即使它們在某些不規則的縮放級別下，也可能存在舍入問題。
我設法使用 Firefox 隱藏接縫以實作 100% 縮放，但不是所有不同級別的縮放。
.gb-top-border-column-fix {
flex: 0 0 auto;
display: flex;
margin: 0 -3px;
}
縮小并回到 100% 后，可能會再次出現接縫。
我懷疑在 <div> 上使用 background-images 可能比管理標簽更容易（你可以更容易地“切斷”背景影像的非整數部分而不是 ）。
uj5u.com熱心網友回復：
我在 2 個靈活段的內部 img 中添加了一些樣式。
使用這種技術，即使有填充的情況也可以合并。（我已將尺寸設定為大于覆寫這種情況所需的尺寸，在正常情況下尺寸可以更低）。
.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;
}
.pad {
padding: 1px;
}
/* added */
.gb-top-border-column-flex-1 img,
.gb-top-border-column-flex-2 img {
margin-left: -5px;
margin-right: -5px;
width: calc(100% 10px);
}<div class="gb-top-border">
<div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top pad"></div>
<div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
<div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top pad"></div>
<div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
<div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top pad"></div>
</div>
<br>
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/462196.html
上一篇：Firefox忽略內容處置
下一篇：如何將容器的原點更改為其中的元素