We Keep Coding

How to resize a png image to fit in a div?

I am trying to resize a PNG image to fit in a div
This the div where I'd like to fit it in:
But this is how it looks like:
I tried to solve it by this Changing image sizes proportionally using CSS? but no change was noticed.
Here's the code snippet:
<div className="Card-header">
{this.props.roadmapID}
<label className="Card-header-status">{this.props.technology.toString().replace(/,/g , " ")}</label>
<label>{this.props.category}</label>
<img src="images/dark_chat.png"></img>
<CardStatus
status = {this.props.status}
onClickStatus = {this.props.onClickStatus}
/>
</div>

div.Card-header > img {
max-width: 100%;
max-height: 100%;
}

Use in your Stylesheet
.Card-header {
width: XYpx;
height: XYpx;
}
and this in your html:
<div class="card-header">
<img src="yourpic.jpg" style=" width:100%; height:100%;">
</div>
Your image will now expand to your given div size you declared in the stylesheet.

Why not set your image height to 100% of your div and then use width:auto ?
<img src="/path/to/your-image.png" style="height:100%; width:auto;" >
Even if the height of your div changes, the image will adjust proportionally.
Also, if you want this page to load reasonably quickly, it would definitely be worth re-sizing that image.

There is no code so this is a guess:
<div MB018>
<img src="whatever.jpg" width="10px" height="10px">
</div>

Javascript active state for buttons composed of images

Javascript newb here. I am trying to make a menu that changes it's image when the button is clicked and active.
Here is the html
<div id="expand_footer">
<div class="footer_btn" id="ftr_btn1">
<img class="shopbtns" src="outerwear_icon.png" width="66" height="87" style="padding-top:4px;" />
</div>
<div class="footer_btn" id="ftr_btn2">
<img class="shopbtns" src="top_icon.png" width="66" height="88" style="padding-top:4px;" />
</div>
<div class="footer_btn" id="ftr_btn3">
<img class="shopbtns" src="bottom_icon.png" width="89" height="91" style="padding-top:1px;" />
</div>
<div class="footer_btn" id="ftr_btn4">
<img class="shopbtns" src="boots_icon.png" width="66" height="80" style="padding-top:10px;" />
</div>
</div>
and the css
.footer_btn {
float:left;
text-align:center;
width:25%; /* percentage of stage to occupy */
margin-top:0px; /*adjust spacing between text and image */
padding:0!important;
cursor:pointer;
z-index: 405!important;
}
I'm switching from AS3 to JS so apologize if the question seems silly. Would the best way to accomplish this just be in CSS or can Javascript handle this. I'm not using Jquery. (avoiding the library load) I am using GSAP so perhaps there is a way with that or? Thanks in advance for any assistance.

Can you possibly use background-image and selector?
.footer_btn {
//Your css
}
.footer_btn:hover {
background-image: url('image.jpg');
}

Bootstrap - Shrink image size as screen shrinks

I have a simple layout created to show a timer. It's a div with 6 images. I just want to shrink the size of the images as the screen size shrinks. The images are in a straight line always. I tried this:
This is how it is # 1280x800:
<div class="row" id="timer-wrap" style="margin-top: 50px;">
<img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
<div id="timer" class="text-center">
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/days.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/hours.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/minutes.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/seconds.png" width="147px" height="136px" />
</div>
</div>
<img class="pull-right" src="img/right_arrow.png" id="right_arrow" />
</div>
And this is the CSS:
#left_arrow, #right_arrow{
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
#left_arrow {
left: 0;
}
#right_arrow {
right: 0;
}
#timer-wrap {
position: relative;
}
#timer img {
padding: 10px;
min-width: 121px;
max-width: 100%;
}
But it's not working. It doesn't shrinks according to screen size. What can I do to achieve the result? Thanks.

The edited fiddle is this one.
Okay, first, we should nest the .col-s directly under the .row:
<div id="timer-wrap" style="margin-top: 50px;"><!-- `class="row"` removed -->
<img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
<div id="timer" class="text-center">
<div class="row"><!-- added this `div` -->
...
Then we need to fix the columnizing. I'm assuming you want them centered in the page and each at most 1/4 of the screen (so they can all four fit in a row). So we want each to span as many as 3 of Bootstrap's columns, i.e. .col-xs-3. We also need to remove the height and width attributes from the img tags, as they're trumping your max-width: 100% right now. So the adjusted columns are like this:
<div class="col-xs-3">
<img src="img/timer/days.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/hours.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/minutes.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/seconds.png" />
</div>
Since Bootstrap's grid is mobile-first, the larger screens will inherit the 3-column size unless you override them.
But then the images overlap the arrow images. So to rectify that, we're going to limit #timer's width and center it within #timer-wrap, like so:
#timer {
width: 80%; /* or whatever works */
margin: 0 auto;
}
Now, at the moment, these images are getting super small. Bootstrap's grid already has gutter padding, so you may want to remove the padding: 10px; that you have on #timer img at the moment.
Messing with the width of the #timer should help you get the look you want. You may want to adjust the layout for really really narrow screens, too.
Let me know what else you need and I'll keep the answer updated.

CSS How to use margins with different divs

Edit: Added Javascript and Masonry tags. I've been looking at masonry and all my modules are the same size so I'm not sure how masonry can help me as I'm not trying to get different size elements to line up. I'm still looking through masonry tutorials as it's a little confusing at the moment. If this is the fix I apologize for adding the additional tags.
I'm creating three divs offline, issues, and then go. I'm taking what I'm calling modules and placing them within these three divs. When I place more than 3 modules they create another row. Unfortunately my titles don't move with the modules and I have to manually go in and change the margin-top to line everything up. I'm not sure how to make it to where the issue rows will change based on how many modules are in there. Any help would be greatly appreciated.
<div class="grid_17">
<div id="offlinetitle">
<p>System is Offline</p>
</div>
<div id="issuestitle">
<p>System is partially offline or experiencing issues</p>
</div>
<div id="issuescontents">
<a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none">
<div class="grid_3">
<p id="contexttitle">Access</p>
<p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p>
</div>
</a>
<div id="AccessModal" class="reveal-modal">
<h1>Access</h1>
<p>This is text to describe something>
<p4>Last Update: 08/30/2013 5:00pm</p4>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div id="gotitle">
<p>All systems go</p>
</div>
</div>
My CSS is as follows grid 17 is the parent container that everything is in then the last container is the actual modules.
.grid_17{
}
#offlinetitle{
color:#FFF;
font-size:25px;
background:#F00;
height: 35px;
text-decoration:none;
list-style:none;
}
#issuestitle{
color:#FFF;
font-size:25px;
background:#FC0;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:15px;
}
#gotitle{
color:#FFF;
font-size:25px;
background:#093;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:535px;
}
.container_24 .grid_3 {
width: 213px;
background:#CCC;
height:55px;
margin-top:10px;
}
If more information is needed please let me know. Thank you for your help!

You need to wrap each "module" (title and contents) in it's own div and then float this parent div to the left. Something like this:
<div class="grid_17">
<div>
<div id="offlinetitle">...</div>
</div>
<div>
<div id="issuestitle">...</div>
<div id="issuescontents">...</div>
</div>
<div>
<div id="gotitle">...</div>
</div>
</div>
With CSS similar to:
.grid_17 { width: 300px; }
.grid_17 > div { float: left; width: 100px; height: 100px; }
Note about clearfix: If you display anything after the grid_17 div, you'll also need to clear the float. I won't go into depth here, but you might want to look up the clearfix class.

Trouble with Javascript mouseover

I've been trying to make a div inside a container div visible when the mouse is moved over the container div. Currently the div that needs to be made visible has property display set as none. I've tried repeatedly to make this work with javascript to no avail. could someone help me out please? The code is included below.
HTML
<html>
<!--Header Files-->
<head>
<!--Icon for tabbed browsers-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/png"/>
<!--Including the CSS file that gives all the appearance attributes to the page-->
<link type="text/css" rel="stylesheet" href="css/talentdatabase.css"/>
<!--Including the JavaScript file to give interaction with the web objects-->
<script src="js/talentdatabase.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!--Title of the page-->
</head>
<!--Body-->
<body>
<!--Top Banner-->
<div class="button">
</div>
<div class="head">
<a href="index.html"><div class="logo">
<image src= "" height="60px" width="320px"/>
</div></a>
<div class="contact">
</div>
</div>
<div class="bar">
<a href="talentdatabase.html"><div class="one">
<h3>Talent Database</h3>
</div></a>
<a href="facilities.html"><div class="two">
<h3>Facilities</h3>
</div></a>
<a href="print.html"><div class="three">
<h3>Print Campaigns</h3>
</div></a>
<a href="tv.html"><div class="four">
<h3>TV Campaigns</h3>
</div></a>
<a href="contact.html"><div class="five">
<h3>Contact Us</h3>
</div></a>
</div>
<div class="container">
<div class="column1">
<div class="pic1"><image src= "images/talentdatabase/back/man.png" height="100%" width="100%"/></div>
<div class="caption">Male&nbsp</div>
<div class="popcontain1">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
<div class="gutter1">
</div>
<div class="column2">
<div class="pic2"><image src= "images/talentdatabase/back/woman.png" height="100%" width="100%"/></div>
<div class="caption">Children&nbsp</div>
<div class="popcontain2">
<div class="bpop1">&nbsp Boy</div>
<div class="bpop2">G &nbsp i &nbsp r &nbsp l &nbsp </div>
</div>
</div>
<div class="gutter2">
</div>
<div class="column3">
<div class="pic3"><image src= "images/talentdatabase/back/child.png" height="100%" width="100%"/></div>
<div class="caption">Female&nbsp</div>
<div class="popcontain3">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
</div>
<div class="bottombar">
<a href="index.html"><div class="one">
<h3>Home</h3>
</div></a>
<div class="bottomleft">
<h3></h3>
</div>
</div>
</body>
</html>
What I've been trying to do is make popcontain1 turn visible when column1 is mouseover-ed.
The css is:
.container{
position:absolute;
width:80%;
height:75%;
top:20%;
left:10%;
}
.column1{
visibility:visible;
font-family:deconeuelight;
position:absolute;
width:32%;
height:100%;
padding:0px;
color:white;
}
.popcontain1{
display:none;
}
.apop1{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(247, 121, 0);
background: rgba(247, 121, 0, .6);
width:100%;
top:60%;
}
.apop2{
position:absolute;
text-align:right;
font-size:1.5em;
background: rgb(255, 241, 35);
background: rgba(255, 241, 35, .4);
width:100%;
top:70%;
}
.apop3{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(50, 205, 50);
background: rgba(50, 205, 50, .6);
width:100%;
top:80%;
}
For this I've been using the following code in the javscript file:
$(document).ready(function() {
$(".column1").hover(function () {
$(".popcontain1").toggle();
})
})
EDIT:
Am I including all the right libraries? I'm using the google hosted jquery library.

First thing you are trying to display a div with class pop contain which is not present there.
So why its not displaying.
Second thing you are using toggle inside hover first argument function, so next time if you will hover the column it will hide popcontain1 div.
Looking your code it seems you want to apply hover on each column and display popcontain inside it.
So why not make it generic. Add a common class on every column div say 'column' and on popcontain div say'popcontain';
Now this will work for all div.
If you want to show it on mouse over and hide on mouse out.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").toggle();
},function(){
$(this).find(".popcontain").toggle();
})
})
If you want to permanently show it on first hover.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").show();
})
})
However you don't need to use jquery if you just want to show hide the inner popcontain.
Following css will help you to achieve what you want.
.popcontain{
display:none;
}
.column:hover .popcontain{
display:block;
}
Edit for your first comment
If you are trying it on local put http: in the link you have included jquery. change this link
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
If you are not putting http: it is searching jquery file on local file system instead of web.

Since you have multiple use an CSS attribute selector to find the element whose class starts with popcontain with:
$("[class^=column]").hover(function () {
$("[class^=popcontain]").toggle();
})