SVG image won't size up to fit parent container

Question

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

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

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.

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

Possible duplicate of [Stretch to fit window size](http://stackoverflow.com/q/6145867) — Mr Lister, Feb 05 '17 at 08:33

AndrewL64 · Answer 1 · 2017-02-03T18:55:52.760

3

-EDIT FOR SVG-

You can display svg images by either using <object>,<embed>,<iframe> or <svg> as follows:

Using the <object> tag:

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

Using the <embed> tag:

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

Using the <iframe> tag:

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

Using the <svg> tag:

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

FOR THE PREVIOUS UNEDITED QUESTION:

-For JPEG/PNG-

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

Close the div tag
Close the img tag correctly
Close your css properties with a semi-colon

Like this:

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

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

edited Feb 03 '17 at 18:55

answered Feb 03 '17 at 18:33

AndrewL64

15,794
8
47
79

The issue isn't the syntax - take a look at my edit in the question. It's strange because I've sized up an image to fill its parent container before, but this specific picture isn't working. This answer wasn't the solution. – patrickhuang94 Feb 03 '17 at 18:36
Please check the jsfiddle links and let me know if that was what you were after homie. – AndrewL64 Feb 03 '17 at 18:41
Logically yes, that should be working and yes, that's what I want to achieve. My image isn't listening to me and I don't know why. – patrickhuang94 Feb 03 '17 at 18:44
2

Ahhhhhh I know why. It's because it's an SVG file. I'm not working with PNG/JPG – patrickhuang94 Feb 03 '17 at 18:45
1

Oh lol. You can convert it to PNG/JPEG with some image editing software or you can include the svg file using the new HTML5 ` – AndrewL64 Feb 03 '17 at 18:46
Or you can use the `` tag too like this: `` – AndrewL64 Feb 03 '17 at 18:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134813/discussion-between-homerboy-and-andrew-lyndem). – patrickhuang94 Feb 03 '17 at 18:51
I tried including a style element (not sure if it takes a style?) but the image won't listen to the style. I also tried but the image is still showing up as the image I screenshotted in my question. – patrickhuang94 Feb 03 '17 at 19:03
hmm. hold on. I'll check it out in jsfiddle. – AndrewL64 Feb 03 '17 at 19:04
Did you target the embed tag correctly. Works fine for me on this fiddle: http://jsfiddle.net/24DNn/85/ – AndrewL64 Feb 03 '17 at 19:15

score 1 · Answer 2 · answered Feb 03 '17 at 18:29

If you want to use background-size you need to apply the image as the background, not an element.

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

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

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

score -1 · Answer 3 · edited Feb 03 '17 at 18:32

-1

If you want to scale it up to the maximum, please try the below code.

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

edited Feb 03 '17 at 18:32

osanger

2,276
3
28
35

answered Feb 03 '17 at 18:29

Krishna

115
10

score -1 · Answer 4 · answered Feb 03 '17 at 18:31

There are a couple issues. You're missing semicolons on the CSS properties, but also, you cannot use background-size on an image that is specified inline.

If you want that image to fill the entire container, you could specify it as a background-image instead and then your background-size property would work. See below.

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

SVG image won't size up to fit parent container

4 Answers4

-EDIT FOR SVG-

FOR THE PREVIOUS UNEDITED QUESTION:

Linked