Html SVG图像赢得'；t最大尺寸以适合父容器

我有一个图像（508 x 564），我想完全适合它的父容器

即使使用

宽度：100%

或

最大宽度：100%

，这也是图像拉伸到的最大值。我正在做一个分割屏幕样式，我只显示分割屏幕的左侧（因此，您将在CSS中看到

width:50%

）

HTML:

如果我指定

width:100%

right，图像应该理想地放大以适合父容器？我还尝试了

max width:100%

，得到了相同的结果

---

注意：我忘了提到我正在使用一个.SVG文件。这可能就是为什么它不像我期望的那样喜欢JPG/PNG文件

仅使用最大宽度：100%作为图像选择器。

如果要使用

背景大小

，则需要将图像应用为背景，而不是元素

.imageContainer{
宽度：50%；
高度：100px；
背景：url（'http://placehold.it/50x50“）无重复中心；
背景尺寸：封面；
}
.形象{
宽度：100%；
身高：100%；
}

这里有一些文字

如果要将其放大到最大值，请尝试以下代码

<img src="your-img" style="max-height:100px;max-width:100px; width:auto; height: auto; position:absolute; margin: auto;">

有几个问题。CSS属性中缺少分号，但也不能对内联指定的图像使用

背景大小

如果希望该图像填充整个容器，则可以将其指定为
背景图像
，然后
背景大小
属性将起作用。见下文

.image {
    background-image: url('path/to/image');
    background-size: cover;
}

-为SVG编辑-
您可以使用
、
、
或
显示svg图像，如下所示：

使用
标记：

<object type="image/svg+xml" data="image.svg">
  Update your browser to support support SVG <-- displayed if svg is not supported
</object>

<embed type="image/svg+xml" src="image.svg" />

<iframe src="image.svg"></iframe>

<svg xmlns="http://www.w3.org/2000/svg"></svg>


更新浏览器以支持SVG
background size
仅适用于背景图像。问题的可能重复之处不在于语法-请查看问题中的“我的编辑”。这很奇怪，因为我以前已经调整了图像的大小以填充其父容器，但是这个特定的图片不起作用。这个答案不是解决方案。请检查JSFIDLE链接，让我知道这是否是您在homie之后所做的。逻辑上是的，这应该是有效的，是的，这就是我想要实现的。我的形象没有听我说，我不知道为什么。啊，我知道为什么。这是因为它是一个SVG文件。我没有使用PNG/JPGOh lol。您可以使用一些图像编辑软件将其转换为PNG/JPEG，也可以使用新的HTML5
标记包含svg文件。将最大宽度设置为百分比将宽度限制为图像宽度的百分比。OP希望图像填充整个容器。
<iframe src="image.svg"></iframe>

<svg xmlns="http://www.w3.org/2000/svg"></svg>

<div class="mainContainer">
    <div class="imageContainer">
        <img class="image" src="//i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
    </div>
    <div class="textContainer">
        <h1>Some text here</h1>
    </div>
</div>

.imageContainer {
    width: 50%;
}

.image {
    width: 100%;
    height: 100%;
    background-size: cover; <!-- remove this. Only applicable to background images and not inline images -->
}