Difficulties formatting an image in a table and width - html

Question

I am creating a table and I am having issues with a picture I am trying to add into one of the <td> fields. It's an icon I have and I want it to display for every record that shows up. The picture's actual size is 64px by 64px. I am trying to get it to be at 36x36, so I set my width and height to that, but it is not taking that and it cutting off the sides to it. Another issue with this table is that I have the index_announcements_wrap set to 100%, but when I try to add the <td>'s the width attribute, it messes up the picture even more, and when I add more than 40% to the message the table doesn't expand to the right.
I created a fiddle to show everything and make it easier for everyone to see what I am doing. I want the table's columns to be 100% of the container and for it to stretch the whole width under the red bar.
https://jsfiddle.net/9w5jsd06/

Answer 1

You need to account for the background size, currently it's set to cover so the image covers the space of the containers, instead use contain to display it AS IS and use no-repeat to avoid the image from repeating.
Change:
background-size: cover;
To:
background-size: contain;
background-repeat: no-repeat;
Here is how I would do it so it's also responsive:
.wrapper {
border: solid 1px #C0C0C0;
border-radius: 8px;
padding: 10px;
min-height: 80px;
text-align: center;
box-sizing: content-box;
}
header {
border: solid 1px #800000;
border-radius: 8px;
padding: 10px;
background: #800000;
color: white;
}
.warning_image {
width: 36px;
height: 36px;
}
.col-3 {
display: inline;
float: left;
width: 32%;
}
#media (max-width: 640px) {
.col-3 {
width: 100%;
display: block;
}
.wrapper {
min-height: 170px;
}
}
<div class="wrapper">
<header>
League Announcements:
</header>
<section>
<div class="col-3">
<img class="warning_image" src="http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png" alt="">
</div>
<div class="col-3">
<p>FROM: <?php echo date('Y-m-d'); ?></p>
</div>
<div class="col-3">
<p>Work for me!</p>
</div>
</section>
</div>

Answer 2

set display: block for your .index_announcement_pic class
fiddle here

Answer 3

.index_announcement_pic {
background: url("http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png") no-repeat;
width: 36px;
height: 36px;
background-size: contain;
background-position: center;
padding: 8px;
position: absolute;
replace this with your .index_announcement_pic in css it will work fine

Answer 4

if you want to display your picture 36*36 then you have to do like this
http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png
instead of
.index_announcement_pic {
background-image: url("http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png");
width: 36px;
height: 36px;
background-size: cover;
background-position: center;
padding: 8px;
/*position: absolute;*/
/*margin-right: 10%;
margin-left: 10%;*/
}
<td class="index_announcement_pic"></td>
do this
.index_announcement_pic {
width: 36px;
height: 36px;
padding: 8px;
}
<td >
<img src="http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png" class="index_announcement_pic">
</td>