I'm new to Bootstrap and html5, and I don't code much. I'm creating my own portfolio website and learning at the same time. I'm having trouble getting object-fit in Safari to match what it does in Chrome. I don't see many people having issues with object-fit within the last few years. Here is one: Object-fit not affecting images
I am using that info to try to put the right selectors on the right items but again, Chrome reads it right, but Safari/Firefox uses the full-sized image at 0,0 and does not adjust size to fit, horizontal or vertical.
I think my issue is probably either with A) syntax; B) using object-fit:cover; on the wrong item; C) issues with Safari/Firefox reading the height of my div and thus being able to scale; or D) other css selectors.
Thank you in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CoverTry</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.carousel-inner > .item > a > img {
margin:auto !important;
}
#projectL, #projectR {
text-align:center;
overflow:hidden;
display:flex;
margin: 0; padding: 0;
margin-bottom:10px;
box-sizing: border-box;
}
#projectL img, #projectR img {
object-fit:cover;
margin: 0; padding: 0;
flex-grow: 1;
overflow: hidden;
box-sizing: border-box;
object-position:50% 50%;
}
@media (min-width: 0px) {
.ht-x {height:245px;}
.ht-2x {height:500px;}
}
@media (min-width: 992px) {
.ht-x {height:395px;}
.ht-2x {height:800px;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm col-md-4"></div>
<div class="col-xs-12 col-sm-6 col-md-5 ht-x" id="projectL"><img src="http://studiotierney.com/studiotierneycom/Images/KentOdell-6734.jpg" /></div>
<div class="col-xs-12 col-sm-6 col-md-3 ht-x" id="projectR"><img src="http://studiotierney.com/studiotierneycom/Images/WillisLease/WillisLease-6789.jpg" /></div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm col-md-4"></div>
<div class="col-xs-12 col-sm-6 col-md-3 ht-2x" id="projectL"><img src="http://studiotierney.com/studiotierneycom/Images/Wright_1.jpg" /></div>
<div class="col-xs-12 col-sm-6 col-md-5 ht-x" id="projectR"><img src="http://studiotierney.com/studiotierneycom/Images/ECOSLO-6579-blur.jpg" /></div>
<div class="col-xs-12 col-sm-6 col-md-5 ht-x" id="projectR"><img src="http://studiotierney.com/studiotierneycom/Images/WSHFC/WSHFC-6916.jpg" /></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
