Scaling images inside div when page is shrunk

[PineSmokes]

Been trying to get these to scale, I got the top image and everything else to scale just not these images.  Any help would be greatly appreciated, thanks in advance.

 

http://www.golden-wand.com/members/contact.php

<div id="bannerImage">
   <div id="bannerImage1"><img src="../Assets/Pictures/Golden Wand/CutOut/Tools.png" width="auto" height="200px" alt="Tools"></div>
   <div id="bannerImage2"><img src="../Assets/Pictures/Golden Wand/CutOut/Angled Truck.png" width="auto" height="200px" alt="Truck"></div>
</div>

http://www.golden-wand.com/members/styles.css

div#bannerImage {border:solid purple;
	width:100%;
	height:222px;
	display:table;
}

div#bannerImage1 {border:solid red;
	position:relative;
	float:left;
	margin-top:7px;
	margin-left:130px;
	max-height:200px;
	max-width:40%;
	display:table-cell;
}
#bannerImage1 img{
	position:relative;
	max-width:auto;
	max-height:100%;
}
div#bannerImage2 {border:solid blue;
	position:relative;
	float:left;
	margin-top:7px;
	margin-left:150px;
	max-height:200px;
	max-width:50%;
	display:table-cell;
}
#bannerImage2 img{
	position:relative;
	max-width:auto;
	max-height:100%;
}

Here's my link to my text file of ownership:  http://www.golden-wand.com/phpfreaks.txt

[PineSmokes]

I guess it could help to note that when they scale, they should stay on the same line, it messes up the page when the div drops below the other div.  I haven't figure out how to get them on to stick on the same line and then scale.

[maxxd]

Have you tried using flexbox? It takes a little getting used to, but can do what you're asking, and is supported by all modern browsers - though (of course) if you're supporting IE 10 you'll need to use prefixes and if IE 9 or lower is important, stick with floats. But like I said, modern browsers have no problem with flex.

[PineSmokes]

Amazing you nailed it but she's not perfect yet, I know I'm just missing something.  It now scales the width and remains inline while flexing but I didn't master the height yet, it stays constant at 200px.  The fix to make it scale smaller when the width scales smaller would be much appreciated thanks

 

http://www.golden-wand.com/members/contact-test.php

div#bannerImage {border:solid purple;
	width:100%;
	height:222px;
	display:inline-flex;
}

div#bannerImage1 {border:solid red;
	margin-top:7px;
	margin-left:130px;
	max-height:200px;
	max-width:40%;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	margin:auto;
}
#bannerImage1 img{
	max-width:100%;
	max-height:100%;
}
div#bannerImage2 {border:solid blue;
	margin-top:7px;
	margin-left:150px;
	max-height:200px;
	max-width:50%;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	margin:auto;
}
#bannerImage2 img{
	max-width:100%;
	max-height:100%;
}

http://www.golden-wand.com/members/styles.css

<div id="bannerImage">
     <div id="bannerImage1"><img src="../Assets/Pictures/Golden Wand/CutOut/Tools.png" width="auto" height="200px" alt="Tools"></div>
     <div id="bannerImage2"><img src="../Assets/Pictures/Golden Wand/CutOut/Angled Truck.png" width="auto" height="200px" alt="Truck"></div>
</div>

[maxxd]

Drop the in-line height attributes on the images. You could also (and I'm not sure if this'll work, it's just an idea) set your #bannerImage{x} divs to display: flex, flex-direction: column, and align-items: stretch.

 

Again, not sure if that will work because it's early and I've not tried it, but it could.

 

One more thing while I'm thinking about it - I'd consolidate the repeated style info from #bannerImage1 and #bannerImage2 into a class (.bannerImageWrap, maybe?) and assign that class to both. You can then overwrite the defaults for either or both divs using the id.

[PineSmokes]

I ended up finding the answer over here http://stackoverflow.com/questions/21103622/auto-resize-image-in-css-flexbox-layout-and-keeping-aspect-ratio it was answer by Omega and they provided an example using http://jsfiddle.net/93TPS/.

 

My code now works perfect and I'm done working on this.

 

Contact Test Page CSS:

div#bannerImage {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

}
.cell{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    text-align: center;
	max-height:200px;
}
img {
	max-width:100%;
	max-height:200px;
}

Contact Test Page HTML:

<div id="bannerImage">
     <div class="cell">
          <img src="../Assets/Pictures/Golden Wand/CutOut/Tools.png" alt="Tools">
     </div>
     <div class="cell">
          <img src="../Assets/Pictures/Golden Wand/CutOut/Angled Truck.png" alt="Truck">
     </div>
</div>