bootstrap图像调整大小与容器中的屏幕大小
问题描述:
我有一个引导页面,它给了我调整位置到屏幕大小的瓷砖。这一切都很好,但我有与其他项目一起添加图像到瓷砖的问题。 下面的脚本是我的问题的一个例子。第一个图块显示在复选框和标题下方的图像。由于此复选框和标题,图像放置在面板的一半以外。在第二个面板上,我只有图像,并且在面板中调整大小,并适应所有屏幕尺寸。 我曾尝试使用CSS来指定图像的高度,但这不适用于所有屏幕尺寸。如果我说高度:50%,那么它适合大屏幕的面板,但在小屏幕上弹出底部。 有没有办法解决这个问题。我可以在CSS中指定所有常见屏幕尺寸的图像尺寸。bootstrap图像调整大小与容器中的屏幕大小
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">
\t <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">
\t <div id="tile1" class="tile">
\t \t <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">
\t <div class="boilerSwitch">
\t \t \t \t <label class="switch">
\t \t \t \t <input type="checkbox" name="boiler" id="boiler" value="1">
\t \t \t \t <div class="slider round"></div>
\t \t \t \t </label></div>
\t \t \t <img src="../heatingCold.png"/>
\t \t \t \t </div>
</div>
</div>
</div>
\t </div>
\t <div class="col-sm-2 col-xs-4">
\t \t <div id="tile2" class="tile">
\t <!--Niamh Room control-->
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
\t \t \t <img src="../heatingCold.png" class="img-responsive"/></div>
\t \t \t </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);
\t this.resizeTO = setTimeout(function() {
\t \t $(this).trigger('resizeEnd');
\t }, 10);
});
$(window).bind('resizeEnd', function() {
\t $(".tile").height($("#tile1").width());
$(".carousel").height($("#tile1").width());
$(".item").height($("#tile1").width());
});
});
</script>
</body>
</html>
答
您在第二图像上忘了class="img-responsive"
,或者是故意的?
你应该看看到Bootstrap Media Queries
/* 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) { ... }
我会看看这个感谢。我确实尝试了img响应,但是这没有奏效。我以前没有用过。通过它的外观调整宽度驾驶室,它做图像的高度 – user2669997
如果容器太小,img-responsive会缩小图像。通过媒体查询,您可以添加在达到特定浏览器窗口宽度时生效的样式 – AlexG
img-responsive不适用于第一张图像。不知道这是否与面板中的复选框有关。如果我在中输入以下内容,我仍然会将图像悬挂在底部,如上图所示。这是在一个大型监视器上 – user2669997