谷歌瀏覽器僅在最小分辨率下顯示IMG（CSS @MEDIA）

Question

使用谷歌瀏覽器在我的引導程序傳送帶上存在問題。 在我的CSS中，我定義了serveral @media寬度以在每個分辨率上完美地顯示圖像和文本。它在Edge，IE和Firefox中運行良好。但谷歌瀏覽器只在最小分辨率（最大767px）下顯示IMG。

我的「分辨率的設置」：

@media (min-width: 1420px){ 
    .reference { 
     display: flex; 
     width: 1170px; 
     padding-left: calc((100%-1179px)/2); 
     padding-right: calc((100%-1179px)/2); 
    } 
    .reference-img { 
     width: 50%; 
    } 
    .reference-info { 
     padding-top: 70px; 
     width: 50%; 
     color: #FFFFFF; 
     text-shadow: 0px 1px 4px #000000; 
     font-size: 20px; 
    } 
    .reference-info h1{ 
     font-size: 60px; 
    } 
    .reference-info h2{ 
     font-size: 40px; 
    } 
    .ctrl-style { 
     font-size: 40px; 
    } 
} 
@media (min-width: 1090px) and (max-width: 1419px){ 
    .reference { 
     display: flex; 
     width: 900px; 
     padding-left: calc((100%-900px)/2); 
     padding-right: calc((100%-900px)/2); 
    } 
    .reference-img { 
     width: 50%; 
    } 
    .reference-info { 
     padding-top: 50px; 
     width: 50%; 
     color: #FFFFFF; 
     text-shadow: 0px 1px 4px #000000; 
     font-size: 16px; 
    } 
    .reference-info h1{ 
     font-size: 50px; 
    } 
    .reference-info h2{ 
     font-size: 30px; 
    } 
    .ctrl-style { 
     font-size: 40px; 
    } 
} 
@media (min-width: 880px) and (max-width: 1089px){ 
    .reference { 
     display: flex; 
     width: 700px; 
     padding-left: calc((100%-700px)/2); 
     padding-right: calc((100%-700px)/2); 
    } 
    .reference-img { 
     width: 50%; 
    } 
    .reference-info { 
     padding-top: 20px; 
     width: 50%; 
     color: #FFFFFF; 
     text-shadow: 0px 1px 4px #000000; 
     font-size: 14px; 
    } 
    .reference-info h1{ 
     font-size: 35px; 
     margin-bottom: 0px !important; 
    } 
    .reference-info h2{ 
     font-size: 30px; 
     margin-bottom: 0px !important; 
    } 
    .ctrl-style { 
     font-size: 40px; 
    } 
} 
@media (min-width: 768px) and (max-width: 879px){ 
    .reference { 
     display: flex; 
     width: 600px; 
     padding-left: calc((100%-600px)/2); 
     padding-right: calc((100%-600px)/2); 
    } 
    .reference-img { 
     width: 50%; 
    } 
    .reference-info { 
     padding-top: 15px; 
     width: 50%; 
     color: #FFFFFF; 
     text-shadow: 0px 1px 4px #000000; 
     font-size: 14px; 
    } 
    .reference-info h1{ 
     font-size: 30px; 
     margin-bottom: 0px !important; 
    } 
    .reference-info h2{ 
     font-size: 25px; 
     margin-bottom: 0px !important; 
    } 
    .ctrl-style { 
     font-size: 40px; 
    } 
} 
@media (max-width: 767px){ 
    .reference { 
     width: 100%; 
     padding-left: 50px; 
     padding-right: 50px; 
    } 
    .reference-img { 
     width: 90%; 
     padding-left: 5%; 
     padding-right: 5%; 
    } 
    .reference-info { 
     padding-top: 15px; 
     width: 100%; 
     color: #FFFFFF; 
     text-shadow: 0px 1px 4px #000000; 
     font-size: 14px; 
    } 
    .reference-info h1{ 
     font-size: 22px; 
     margin-bottom: 0px !important; 
    } 
    .reference-info h2{ 
     font-size: 22px; 
     margin-bottom: 0px !important; 
    } 
    .ctrl-style { 
     font-size: 25px; 
    } 
} 

這裏是一個Bootply，使用Chrome打開這個，你就能明白我的意思。 http://www.bootply.com/tcUZLBKQna

Answer 1

我現在已經刪除填充calc()方法其做工精細所有的瀏覽器 嘗試用片段，並切換到全屏

@media (min-width: 1420px){ 
 
\t .reference { 
 
\t \t display: flex; 
 
\t \t width: 1170px; 
 
\t } 
 
\t .reference-img { 
 
\t \t width: 50%; 
 
\t } 
 
\t .reference-info { 
 
\t \t padding-top: 70px; 
 
\t \t width: 50%; 
 
\t \t color: #FFFFFF; 
 
\t \t text-shadow: 0px 1px 4px #000000; 
 
\t \t font-size: 20px; 
 
\t } 
 
\t .reference-info h1{ 
 
\t \t font-size: 60px; 
 
\t } 
 
\t .reference-info h2{ 
 
\t \t font-size: 40px; 
 
\t } 
 
\t .ctrl-style { 
 
\t \t font-size: 40px; 
 
\t } 
 
} 
 
@media (min-width: 1090px) and (max-width: 1419px){ 
 
\t .reference { 
 
\t \t display: flex; 
 
\t \t width: 900px; 
 
\t } 
 
\t .reference-img { 
 
\t \t width: 50%; 
 
\t } 
 
\t .reference-info { 
 
\t \t padding-top: 50px; 
 
\t \t width: 50%; 
 
\t \t color: #FFFFFF; 
 
\t \t text-shadow: 0px 1px 4px #000000; 
 
\t \t font-size: 16px; 
 
\t } 
 
\t .reference-info h1{ 
 
\t \t font-size: 50px; 
 
\t } 
 
\t .reference-info h2{ 
 
\t \t font-size: 30px; 
 
\t } 
 
\t .ctrl-style { 
 
\t \t font-size: 40px; 
 
\t } 
 
} 
 
@media (min-width: 880px) and (max-width: 1089px){ 
 
\t .reference { 
 
\t \t display: flex; 
 
\t \t width: 700px; 
 
\t } 
 
\t .reference-img { 
 
\t \t width: 50%; 
 
\t } 
 
\t .reference-info { 
 
\t \t padding-top: 20px; 
 
\t \t width: 50%; 
 
\t \t color: #FFFFFF; 
 
\t \t text-shadow: 0px 1px 4px #000000; 
 
\t \t font-size: 14px; 
 
\t } 
 
\t .reference-info h1{ 
 
\t \t font-size: 35px; 
 
\t \t margin-bottom: 0px !important; 
 
\t } 
 
\t .reference-info h2{ 
 
\t \t font-size: 30px; 
 
\t \t margin-bottom: 0px !important; 
 
\t } 
 
\t .ctrl-style { 
 
\t \t font-size: 40px; 
 
\t } 
 
} 
 
@media (min-width: 768px) and (max-width: 879px){ 
 
\t .reference { 
 
\t \t display: flex; 
 
\t \t width: 600px; 
 
\t } 
 
\t .reference-img { 
 
\t \t width: 50%; 
 
\t } 
 
\t .reference-info { 
 
\t \t padding-top: 15px; 
 
\t \t width: 50%; 
 
\t \t color: #FFFFFF; 
 
\t \t text-shadow: 0px 1px 4px #000000; 
 
\t \t font-size: 14px; 
 
\t } 
 
\t .reference-info h1{ 
 
\t \t font-size: 30px; 
 
\t \t margin-bottom: 0px !important; 
 
\t } 
 
\t .reference-info h2{ 
 
\t \t font-size: 25px; 
 
\t \t margin-bottom: 0px !important; 
 
\t } 
 
\t .ctrl-style { 
 
\t \t font-size: 40px; 
 
\t } 
 
} 
 
@media (max-width: 767px){ 
 
\t .reference { 
 
\t \t width: 100%; 
 
\t \t padding-left: 50px; 
 
\t \t padding-right: 50px; 
 
\t } 
 
\t .reference-img { 
 
\t \t width: 90%; 
 
\t \t padding-left: 5%; 
 
\t \t padding-right: 5%; 
 
\t } 
 
\t .reference-info { 
 
\t \t padding-top: 15px; 
 
\t \t width: 100%; 
 
\t \t color: #FFFFFF; 
 
\t \t text-shadow: 0px 1px 4px #000000; 
 
\t \t font-size: 14px; 
 
\t } 
 
\t .reference-info h1{ 
 
\t \t font-size: 22px; 
 
\t \t margin-bottom: 0px !important; 
 
\t } 
 
\t .reference-info h2{ 
 
\t \t font-size: 22px; 
 
\t \t margin-bottom: 0px !important; 
 
\t } 
 
\t .ctrl-style { 
 
\t \t font-size: 25px; 
 
\t } 
 
} 
 

 
.ctrl-style { 
 
\t color: #FFFFFF; 
 
\t -webkit-transition-duration: 0.2s; 
 
\t -moz-transition-duration: 0.2s; 
 
\t -o-transition-duration: 0.2s; 
 
\t transition-duration: 0.2s; 
 
} 
 
.ctrl-style:hover { 
 
\t color: #51B5B6 !important; 
 
} 
 
.ctrl-style:focus { 
 
\t color: #FFFFFF; 
 
} 
 
.carousel-control-left { 
 
\t top: 50%; 
 
\t position: absolute; 
 
\t left: 5%; 
 
\t color: #FFFFFF; 
 
\t text-align: center; 
 
\t text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
 
\t outline: none; 
 
\t text-decoration: none; 
 
} 
 
.carousel-control-right { 
 
\t top: 50%; 
 
\t position: absolute; 
 
\t color: #FFFFFF; 
 
\t text-align: center; 
 
\t text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
 
\t right: 5%; 
 
\t left: auto; 
 
\t outline: none; 
 
\t text-decoration: none; 
 
} 
 
.carousel-control-right:focus, .carousel-control-left:focus { 
 
\t outline: none; 
 
\t text-decoration: none; 
 
} 
 
.carousel-indicators { 
 
\t display: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container-fluid"> 
 
\t <div class="row portfolio-padding"> 
 
    \t \t <center> 
 
\t \t \t <div id="referenceCarousel" class="carousel slide" data-ride="carousel" data-interval="8000"> 
 
\t \t \t \t <ol class="carousel-indicators"> 
 
\t \t \t \t \t <li data-target="#referenceCarousel" data-slide-to="0" class="active"></li> 
 
\t \t \t \t \t <li data-target="#referenceCarousel" data-slide-to="1"></li> 
 
\t \t \t \t </ol> 
 
\t \t \t \t <div class="carousel-inner" role="listbox"> 
 
\t \t \t \t \t <div class="item active"> 
 
\t \t \t \t \t \t <div class="reference"> 
 
\t \t \t \t \t \t \t <div class="reference-img"> 
 
\t \t \t \t \t \t \t \t <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" style="width: 100%"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="reference-info"> 
 
\t \t \t \t \t \t \t \t <h1>Lorem Ipsum</h1><br> 
 
\t \t \t \t \t \t \t \t Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="reference"> 
 
\t \t \t \t \t \t \t <div class="reference-img"> 
 
\t \t \t \t \t \t \t \t <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" style="width: 100%"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="reference-info"> 
 
\t \t \t \t \t \t \t \t <h1>Lorem Ipsum</h1><br> 
 
\t \t \t \t \t \t \t \t Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a class="carousel-control-left ctrl-style" href="#referenceCarousel" role="button" data-slide="prev"> 
 
\t \t \t \t <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
\t \t \t \t <span class="sr-only">Previous</span> 
 
\t \t \t \t </a> 
 
\t \t \t \t <a class="carousel-control-right ctrl-style" href="#referenceCarousel" role="button" data-slide="next"> 
 
\t \t \t \t <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
\t \t \t \t <span class="sr-only">Next</span> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </center> 
 
\t </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>