I am having an issue with my bootstrap page where the tiles adjust position based on screen size. Everything works well except when I try to add images to the tiles along with other content. In the example below, you can see that the first tile has an image displayed below a checkbox and title. However, due to the checkbox and title, the image appears cut off at the bottom of the panel. On the second panel, I only have the image and it resizes perfectly within the panel to fit all screen sizes. I have attempted to use CSS to specify the height of the image, but this solution does not work consistently across all screen sizes. If I set the height to 50%, it fits on large screens but overflows at the bottom on smaller screens. Is there a way to work around this issue? Can I specify the image size in CSS for common screen sizes?
HTML Script
<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>