SVG图像的大小不会适合父容器

Question

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

即使使用width: 100%或max-width: 100%，这也是图片延伸到的最大值。我正在做分屏风格，我只显示分屏的左侧（因此，你会在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

-EDIT FOR SVG -

您可以使用<object>，<embed>，<iframe>或<svg>来显示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/＆lt; - 50％宽度

jsFiddle：https://jsfiddle.net/e0d8my79/194/＆lt; - 100％宽度

Answer 2

如果您想使用background-size，则需要将图像应用为背景，而不是元素。

＆＃13;

＆＃13;

.imageContainer {
  width: 50%;
  height: 100px;
  background: url('http://placehold.it/50x50') no-repeat center center;
  background-size: cover;
}
.image {
  width: 100%;
  height: 100%;
  
}

＆＃13;

<div class="mainContainer">
  <div class="imageContainer">
  </div>

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

仅使用最大宽度：100％用于图像选择器。

Answer 4

如果您想将其扩展到最大值，请尝试以下代码。

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

Answer 5

有几个问题。您在CSS属性上缺少分号，但是，您也无法在内联指定的图像上使用background-size。

如果您希望该图片填充整个容器，则可以将其指定为background-image，然后您的background-size属性将起作用。见下文。

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