Jump to content
Sign in to follow this  
PineSmokes

Scaling images inside div when page is shrunk

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.