Jump to content

Scaling images inside div when page is shrunk


PineSmokes
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. Please don't revive it unless you have something important to add.

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.

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