SVG image won't size up to fit parent container - html

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

Answer 1

-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

Answer 2

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>

Answer 3

use only max-width:100% for the image selector.

Answer 4

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

Answer 5

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