我有一个 Bootstrap 页面，它为我提供了根据屏幕大小调整位置的图 block 。一切都很好，但我在将图像与其他元素一起添加到图 block 时遇到了问题。 下面的脚本是我的问题的一个例子。第一个图 block 有一个图像，显示在复选框和标题下方。由于此复选框和标题，图像被放置在面板的一半位置。在第二个面板上，我只有图像，它在面板中完美调整大小并适应所有屏幕尺寸。 我曾尝试使用 CSS 来指定图像的高度，但这并不适用于所有屏幕尺寸。如果我说 height:50% 那么它适合大屏幕的面板内部，但在小屏幕上弹出底部。 有没有解决的办法。我可以在 CSS 中指定所有常见屏幕尺寸的图像尺寸吗？
HTML 脚本
<html>
<head>
<meta charset="utf-8">
<title>HomeControl</title>
<!-- include bootstrap -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="test.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-2 col-xs-4">
<div id="tile1" class="tile">
<p style="color:blue">Boiler On/Off</p>
<!--Boiler on/off control-->
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="boilerSwitch">
<label class="switch">
<input type="checkbox" name="boiler" id="boiler" value="1">
<div class="slider round"></div>
</label></div>
<img src="../heatingCold.png"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile2" class="tile">
<!--Niamh Room control-->
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="../heatingCold.png" class="img-responsive"/></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$(".tile").height($("#tile1").width());
$(".carousel").height($("#tile1").width());
$(".item").height($("#tile1").width());
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 10);
});
$(window).bind('resizeEnd', function() {
$(".tile").height($("#tile1").width());
$(".carousel").height($("#tile1").width());
$(".item").height($("#tile1").width());
});
});
</script>
</body>
</html> 
最佳答案
您在第二张图片上忘记了 class="img-responsive"，还是故意的？
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
关于html - 在容器中将引导图像调整为屏幕大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39704970/