Question

我是Bootstrap和html5的新手，我的代码不多。我正在创建自己的投资组合网站并同时学习。我在Safari中遇到对象，无法与Chrome中的对象相匹配。在过去的几年里，我没有看到很多人遇到过贴身问题。这是一个：Object-fit not affecting images

我正在使用该信息尝试将正确的选择器放在正确的项目上，但Chrome再次正确读取，但Safari / Firefox使用0,0的全尺寸图像并且不调整大小以适应水平或垂直。

我认为我的问题可能是A）语法; B）使用物体贴合：覆盖;在错误的项目; C）Safari / Firefox的问题，读取我的div的高度，从而能够扩展;或者D）其他css选择器。

提前谢谢。

<!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>

Safari / Firefox中的对象适应失败

0 个答案: