無法使用 svg 影像建立響應式網格區域
P粉022140576
2023-08-30 19:15:16
<p>在我嘗試創建一個包含 svg 圖像的響應式網格區域時,我遇到了奇怪的行為,例如任意網格區域寬度,以及無法讓圖像增大或縮小到某個點而不停止。我得到的最接近的是:</p>
<p>
<pre class="brush:css;toolbar:false;">* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: grid;
grid-template-columns: auto 1fr;
background-color: green;
padding: 1rem;
}
img {
width: 100%;
max-width: 25vw;
min-width: 12rem;
background-color: pink;
}
div {
background-color: red;
text-align: center;
}
nav {
background-color: yellow;
grid-column: span 2;
}</pre>
<pre class="brush:html;toolbar:false;"><header>
<img src="data:image/svg xml,">
<div>
<h1>Heading</h1>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
</div>
<nav>
<a href="#">Menu Item 1</a>
<a href="#">Menu Item 2</a>
<a href="#">Menu Item 3</a>
<a href="#">Menu Item 4</a>
<a href="#">Menu Item 5</a>
<a href="#">Menu Item 6</a>
</nav>
</header></pre>
</p>
<p>我嘗試過高度、最小高度、最大高度,甚至在寬度內使用夾子,但收效甚微。也許我只是缺乏理解,就像一些現有的回應所暗示的那樣,但不知道如何解決。 </p>
影像列的寬度不是任意的。
網格容器首先佈置結構。 。 然後正在佈置物品。
這表示當影像處於其自然寬度 (100%) 時,第一列的大小將會調整。
當項目以
寬度:50%
呈現時,瀏覽器不會傳回並重新調整列的大小。所以列的大小不是任意的;這是圖像的自然寬度。
(這可以說是一個錯誤或 CSS 限制。)
請注意,當影像為全寬時,此問題不存在:
當你嘗試
width: 150%
時它會回來:旁注
一般來說,在使用 CSS Grid 和 Flexbox 時,將圖像作為容器的子項並不是一個好主意。
換句話說,通常最好避免將影像用作網格或彈性項目。
不同瀏覽器之間有太多錯誤和渲染差異。
在許多情況下,只需將圖像放入
div
中(使div
成為網格項目)即可解決問題。避免將影像作為網格或彈性項目: