Jump to content

Scaling images inside div when page is shrunk


PineSmokes
 Share

Go to solution Solved by PineSmokes,

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

Link to comment
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
Link to comment
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>
Link to comment
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
Link to comment
Share on other sites

  • Solution

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>

Link to comment
Share on other sites

This thread is more than a year old.

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.

 Share

×
×
  • 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.