谷歌浏览器仅以最小分辨率显示 IMG (CSS @MEDIA)

Question

使用谷歌浏览器的引导轮播出现问题。 在我的 CSS 中，我定义了多个 @media 宽度以在每种分辨率下完美地显示图像和文本。它在 Edge、IE 和 Firefox 中运行良好。但谷歌浏览器仅以较小的分辨率（最大 767 像素）显示 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() 方法现在它在所有浏览器中都可以正常工作 尝试使用 sn-p 并更改为全屏

@media (min-width: 1420px){
	.reference {
		display: flex;
		width: 1170px;
	}
	.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;
	}
	.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;
	}
	.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;
	}
	.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;
	}
}

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

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