Html SVG 调整大小而不是溢出

发布于04月07日

请考虑一个HTML页面中的以下SVG图像:

<img src="https://keyller.io/generators/fr/solfege/cle-de-sol/img/treble-clef-9-sol.svg">

以下是应用于该图像的CSS:

img { 
    position: absolute;
    left: 500px;    
}

当图像更接近视区的右限制时，将调整图像大小以完全适应页面.

JFIDELL:https://jsfiddle.net/Imabot/hr6mowxp/1/

如果我将图像替换为jpg，图像现在会溢出，并且不会调整大小.

JFIDELL:https://jsfiddle.net/Imabot/hr6mowxp/2/

因此，以下SVG溢出:

<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overfl
ow_logo.svg">

JFIDELL:https://jsfiddle.net/Imabot/hr6mowxp/3/

谁能解释一下为什么第一个SVG被调整大小，而其他图像溢出？

如何在第一个图像上执行溢出，而不是调整大小？

推荐答案

它为什么要这样做呢？因为SVG不只是一张图片.SVG是一种文档.

当您包含一个带有<iframe>的HTML文件时，当您更改框架的大小时，您不会期望里面的文本会zoom .SVG也是如此.

相比之下，SVG图像可以以任何像素大小绘制，因此它们不需要明确定义的高度或宽度.而且它们不会总是有一个明确定义的纵横比.如果您希望SVGzoom 以适应您指定的维度(即，min-width)，则需要显式提供此信息(以及更多信息).

有用的文章:How to Scale SVG | CSS-Tricks - CSS-Tricks篇

要执行溢出，只需添加min-width，如下所示:

img {
  position: absolute;
  left: 500px;
  min-width: 640px;
}

<!-- resized -->
<img src="https://keyller.io/generators/fr/solfege/cle-de-sol/img/treble-clef-9-sol.svg">

<!-- overflow -->
<!-- <img src="https://www.silicon.fr/wp-content/uploads/2019/08/stack_overflow.jpg"> -->

Edit:个

SO SVG声明了width和height，而另一个则没有.所以SVG将try 保持这width，这导致了您所看到的overflow.您会注意到，如果在音乐SVG上声明了width，那么它会导致所需的溢出.

宽度未定义:

img {
  position: absolute;
  left: 500px;
}

<img src="https://keyller.io/generators/fr/solfege/cle-de-sol/img/treble-clef-9-sol.svg">

定义的宽度:svg[Attributes Style] {width: 800.12;}

img {
  position: absolute;
  left: 500px;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg">

在聊天中解决了静态宽度和vmin max-height和max-width以及object-fit: cover;

Html SVG 调整大小而不是溢出

推荐答案

Html相关问答推荐

当ul为Flex时，使ul元素在指定高度内可垂直滚动

使用tauri构建的Next.js应用程序不显示我的404页面

css网格区域的布局不展开，也不显示滚动条

输入表单在奇怪的地方舍入的标签

在CSS中旋转排除的蒙版图像

未知高度正在应用于前标记

根据屏幕大小拆分长行列表

如何在HTML中适当地为单选按钮网格添加标签？

Chrome浏览器错误：上的主题验证判断https：//pagead2.googlesyndication.com/失败

网格中的图像zoom 不正确

不完整的悬停

不同屏幕尺寸的显示问题

在