无法使用 svg 图像创建响应式网格区域
P粉022140576
P粉022140576 2023-08-30 19:15:16
0
1
425

在我尝试创建一个包含 svg 图像的响应式网格区域时,我遇到了奇怪的行为,例如任意网格区域宽度,以及无法让图像增大或缩小到某个点而不停止。我得到的最接近的是:

* { 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; }

Heading

Text Line 1

Text Line 2

Text Line 3

我尝试过高度、最小高度、最大高度,甚至在宽度内使用夹子,但收效甚微。也许我只是缺乏理解,就像一些现有的回复所暗示的那样,但不知道如何解决。

P粉022140576
P粉022140576

全部回复 (1)
P粉294954447

图像列的宽度不是任意的。

网格容器首先布置结构。然后正在布置物品。

这意味着当图像处于其自然宽度 (100%) 时,第一列的大小将会调整。

当项目以宽度:50%呈现时,浏览器不会返回并重新调整列的大小。

所以列的大小不是任意的;这是图像的自然宽度。

(这可以说是一个错误或 CSS 限制。)

请注意,当图像为全宽时,此问题不存在:

* { box-sizing: border-box; } body { margin: 0; } header { display: grid; grid-template-columns: auto 1fr; background-color: green; padding: 1rem; } img { width: 100%; background-color: pink; } div { background-color: red; } nav { background-color: yellow; grid-column: span 2; }

Heading

Text Line 1

Text Line 2

Text Line 3

当你尝试width: 150%时它会回来:

* { box-sizing: border-box; } body { margin: 0; } header { display: grid; grid-template-columns: auto 1fr; background-color: green; padding: 1rem; } img { width: 150%; background-color: pink; } div { background-color: red; } nav { background-color: yellow; grid-column: span 2; }

Heading

Text Line 1

Text Line 2

Text Line 3


旁注

一般来说,在使用 CSS Grid 和 Flexbox 时,将图像作为容器的子项并不是一个好主意。

换句话说,通常最好避免将图像用作网格或弹性项目。

不同浏览器之间存在太多错误和渲染差异。

在许多情况下,只需将图像放入div中(使div成为网格项)即可解决问题。

避免将图像作为网格或弹性项目:

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!