我想将svg图像的大小调整为屏幕宽度的100%。然后高度应该溢出，保持原来的高/宽比
我在一个网站上放置了一个svg worldmap（我在代码中只留下了一个路径（国家/地区））：
.mapcontainer {height: 120%; width: 100%;}<div class="mapcontainer">
<svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 620">
<path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
</svg>
</div>根据我的研究，上面的viewBox属性的语法应该使SVG缩放来填充屏幕或容器，但它达到了屏幕的100%高度，并且在宽度上两边都留有空间。但我希望这个特殊的地图规模到100%的屏幕宽度和溢出高度。
我试过：
-
null
共有1个答案
您可能希望在svg上指定preserveaspectratio为slice，而在CSS中只指定width。
通过在svg上设置宽度（而不是高度），浏览器将自动保持纵横比。
您可能还希望在CSS中将min-height设置为100%。
.mapcontainer {width: 100%;}<div class="mapcontainer">
<svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 620"
preserveAspectRatio="xMidYMin slice">
<rect fill="red" x="0" y="0" width="950" height="620" />
<rect fill="white" x="10" y="10" width="930" height="600" />
<path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
</svg>
</div>-
问题内容： 目前，通过STYLE，我可以在和高度上使用和，反之亦然，但是我仍然不能将图像分别限制在一个特定的位置，无论是太宽还是太高。 有任何想法吗？ 问题答案： 如果仅在图像上定义一维，则将始终保留图像长宽比。 图像是否比您喜欢的更大/更佳？ 您可以将其放入DIV中，该DIV设置为图像所需的最大高度/宽度，然后设置“ overflow：hidden”。那将收获超出您想要的任何东西。 如果图像的宽
-
我有一个图像叫做myImage。jpg。这是我的CSS： 出于某种原因，当我这样做时，myImage的宽度会延伸到整个屏幕上，但高度只会延伸到页面上其他所有内容的高度。所以如果我把一堆 在我的html页面，然后高度会增加。如果我的超文本标记语言页面只包含一个 那么背景图像的高度就是1的高度 我如何使我的背景图像的高度100%的屏幕，用户使用它来查看网页？
-
问题内容： 我想下载一个图像（大小不明，但始终大致为正方形）并显示它，以便它在任何屏幕尺寸上都水平填充屏幕，并垂直拉伸以保持图像的纵横比。这是我的（无效）代码。它水平拉伸图像，但不垂直拉伸图像，因此将其压扁… 问题答案： 我使用自定义视图完成了此操作。设置layout_width =“ fill_parent”和layout_height =“ wrap_content”，并将其指向适当的可绘制对
-
问题内容： 我有一个名为myImage.jpg的图像。这是我的CSS： 由于某些原因，当我这样做时，myImage的宽度会延伸到整个屏幕，但是高度只会延伸到页面上其他所有位置的高度。所以如果我放一堆 在我的html页面中，然后高度会增加。如果我的HTML页面仅包含一个 那么背景图片的高度就是一个的高度 如何将背景图片的高度设为用户用来查看网页的屏幕的100％？ 问题答案： 您需要将的高度设置为
-
问题内容： 使用CSS flex box模型，如何强制图像保持其纵横比？ JS小提琴：http：//jsfiddle.net/xLc2Le0k/2/ 请注意，图像会拉伸或收缩以填充容器的宽度。很好，但是我们也可以拉伸或缩小 高度 以保持图像比例吗？ 的HTML 的CSS 问题答案： 对于img标签，如果您定义一侧，那么将调整另一侧的大小以保持纵横比，并且默认情况下，图像会扩展到其原始大小。 使用此
-
问题内容： 我有一个可以放在一起的网站，它的固定长宽比大约等于风景，例如视频。 我想使它居中并扩展以填充可用的宽度和可用的高度，但不要在任何一侧变大。 例如： 高而薄的页面将使内容伸展整个宽度，同时保持成比例的高度。 短而宽的页面将使内容伸展到整个高度，并具有成比例的宽度。 我一直在研究两种方法： 使用具有正确长宽比的图像来扩展容器，但我无法在主要浏览器中以相同的方式表现该图像。 设置成比例的底部