htmlcssimageobject-fit
Fit multiple images into a single table cell
I am having some issues with sizing images. I have images that I have created with photoshop. They are all PNG's and have cropped them to remove as much white space as possible, but one image is moved to the right a bit. Since I'm using a table, I can't add padding or margin to move it to the left. I am using the object-fit method to fit the image to the right size and fit the table, but it doesn't seem to fit the way I want it. Below is the image of what I mean:
Code:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>[KINGDOMS OF CORELIA]</title>
<link rel="icon" href="favicon.ico">
<style>
* {
box-sizing: border-box;
}
body {
text-align: center;
font-family: sans-serif;
}
a {
color: blue;
text-decoration: none;
}
hr {
width: 50%;
}
nav {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav {
float: left;
margin-top: 5px;
display: block;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.right {
float: right;
}
button {
font-family: inherit;
font-size: 80%;
padding: .5em 1em;
color: #444;
color: rgba(0,0,0,.8);
border: 1px solid #999;
border: none transparent;
background-color: #e6e6e6;
text-decoration: none;
border-radius: 2px;
cursor: pointer;
}
button:hover {
background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}
.fade {
margin: 50px;
padding: 50px;
opacity: 1;
}
img {
width: 100%;
height: 100%;
}
.slideshow {
margin: 50px auto;
position: relative;
width: 700px;
height: 400px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
img {
}
.guard_armor {
width: 20%;
height: 50%;
object-fit: contain;
}
.guard_weapons {
width: 100%;
height: 100%;
object-fit: contain;
}
.guard_items {
width: 100%;
height: 100%;
object-fit: contain;
}
.archer_armor {
width: 60%;
height: 90%;
object-fit: contain;
}
.archer_weapons {
width: 150%;
height: 150%;
object-fit: contain;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 0.5px solid black;
}
th {
text-align: left;
}
th, td {
padding: 15px;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body style="margin: 0;">
<nav>
<ul>
<li><a class="nav" href="#">CORELIA</a></li>
<li><a class="nav" href="staff.html">Staff</a></li>
<li><a class="nav" href="endran.net/network.html">Network</a></li>
<li><a class="nav" href="support.html">Support</a></li>
<li><a class="right" href="login.html" target="_blank">
<button type="button">Login</button>
</a></li>
<li><a class="right" href="signup.html" target="_blank">
<button type="button">Sign Up</button>
</a></li>
</ul>
</nav>
<h1>Welcome to the Kingdoms of Corelia! | play.corelia.online:25568</h1>
<h2>[KITPVP | FACTIONS]</h2>
<div class="slideshow">
<div>
<img src="images/spawn.jpg">
</div>
<div>
<img src="images/fight.jpg">
</div>
<div
<img src="images/arena.jpg">
</div>
</div>
<br />
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div id="content">
<div id="history" class="fade">
<h2>The History of the Kingdoms</h2>
<hr />
<p>The Kingdoms of Corelia started with a small towny server called <a href="http://endran.net/" target="_blank">Endran</a>. Xp10d3 (the owner) was (and still is) a Moderator on the server and ended up creating a whitelisted Vanilla server originally called Erath. The server was relatively unsuccessful, and the world files ended up getting corrupted. Xp10d3 decided to create a KitPvP server after making a KitPvP plugin. He added a few more gamemodes before fully releasing Corelia until it is now what it looks like today.</p>
</div>
<div id="about" class="fade">
<h2>About the Kingdoms</h2>
<hr />
<p>On the website (it's still a work in progress) you can chat with other people in the chat. All you have to do is signup and than login to chat with other people! Other than that, we don't have much else. Sorry for that.</p>
</div>
<div>
<h2 class="fade">KITS</h2>
<table style="width:100%">
<tr>
<th>Kit Name</th>
<th>Armor</th>
<th>Weapons</th>
<th>Items</th>
<th>Tier</th>
</tr>
<tr>
<td>Guard</td>
<td><img src="images/kits/guard_armor.png" class="guard_armor"></td>
<td><img src="images/kits/guard_weapons.png" class="guard_weapons"></td>
<td><img src="images/kits/cooked_beef.png" class="guard_items"></td>
<td>1</td>
</tr>
<tr>
<td>Archer</td>
<td><img src="images/kits/archer_armor.png" class="archer_armor"></td>
<td><img src="images/kits/archer_weapons.png" class="archer_weapons"></td>
<td><img src="images/kits/archer_items"></td>
<td>1</td>
</tr>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
$(".slideshow > div:gt(0)").hide();
setInterval(function() {
$('.slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
</script>
</body>
</html>
Note: I purposely made the image on the bottom missing because I haven't added the image yet.
Solution
Use object-position as described here to fix that.
Specifies the alignment of the replaced element's content object within the element's box.