html - SVG 图像的大小无法适应父容器

Question

我有一张图片 (508 x 564)，我想将其完全放入其父容器中。

即使使用 width: 100% 或 max-width: 100%，这也是图像拉伸(stretch)到的最大。我正在做一个分屏样式，我只显示分屏的左侧(因此，您会在 CSS 中看到 width: 50%。)

HTML:

<div class="mainContainer">
    <div class="imageContainer">
        <img class="image" src="path/to/image"></img>
    </div>

    <div class="textContainer">
        <h1>Some text here</h1>
    </div>
</div>

CSS:

.imageContainer {
    width: 50%;
}

.image {
    width: 100%;
    height: 100%;
    background-size: cover;
}

如果我指定 width: 100%，图像应该理想地放大以适合父容器，对吗？我也试过 max-width: 100% 得到了同样的结果。

注意:我忘记提及我正在使用 .SVG 文件。这可能就是为什么它不像我期望的那样喜欢 JPG/PNG 文件的原因!!!!

Answer 1

-编辑SVG-

您可以使用 <object> 显示 svg 图像, <embed> , <iframe>或 <svg>如下:

使用 <object>标签:

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

使用 <embed>标签:

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

使用 <iframe>标签:

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

使用 <svg>标签:

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

---

对于上一个未经编辑的问题:

-对于 JPEG/PNG-

您的 html 和 css 标记全乱了。你需要:

1. 关闭div标签
2. 正确关闭img标签
3. 用分号结束你的 css 属性

像这样:

HTML:

<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>

CSS:

.imageContainer {
    width: 50%;
}

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

jsFiddle:https://jsfiddle.net/e0d8my79/192/ <-- 50% 宽度

jsFiddle:https://jsfiddle.net/e0d8my79/194/ <-- 100% 宽度