SVG图片无法放大到适合父容器的大小 [英] SVG image won't size up to fit parent container

问题描述

我有一张要完全适合其父容器的图像(508 x 564).

I have an image (508 x 564) that I want to fit fully into its parent container.

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

Even with width: 100% or max-width: 100%, this is the biggest the image stretches to. I'm doing a split screen style, where I'm only showing the left side of the split screen (thus, you'll see width: 50% in the CSS.)

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％，结果相同.

The image should ideally scale up to fit the parent container if I specify width: 100% right? I've also tried max-width: 100% with the same results.

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

NOTE: I FORGOT TO MENTION THAT I'M WORKING WITH A .SVG FILE. This is probably why it's not behaving the way I expect it to like JPG/PNG files!!!!

推荐答案

-编辑SVG-

您可以使用< object> ，< 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标记都搞砸了.您需要:

Your html and css markup is all messed up. You need to:

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/192/ <-- 50% width

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

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

这篇关于SVG图片无法放大到适合父容器的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！