rodb Posted January 17, 2016 Share Posted January 17, 2016 I am trying to set a panel height to display an image. The section of code being used is : <div class="col-md-2"> <div class="panel panel-default"> <div class="panel-body"> <img class="scale" data-scale="best-fill" data-align="center" src="<?php echo $imagedir . '/' . $person['image'] ?> "> </div> </div> </div> I am using a jquery plugin (image-scale.min.js) to resize an image to be displayed in the panel. However the panel has a width of 'col-md-2' but I can not seem to set a height. When the image is displayed the panel is only one row in height therefore I can only get the very top of the image. I have tried creating some css styles to set the height but must be doing something wrong: example of css. .image-container div{ height: 200px; width: 200px; border: 1px solid black;}and it is applied as follows: <div class="panel-body image-container"> help would be greatly appreciated. Rod Quote Link to comment https://forums.phpfreaks.com/topic/300484-defining-panel-size-help-needed/ Share on other sites More sharing options...
benanamen Posted January 17, 2016 Share Posted January 17, 2016 (edited) A bootstrap panel will scale in height automatically. You don't need CSS. The problem must be with your plugin. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css"> </head> <body> <div class="panel panel-default"> <div class="panel-body"> <img src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" alt=""> </div> </div> </body> </html> Edited January 17, 2016 by benanamen Quote Link to comment https://forums.phpfreaks.com/topic/300484-defining-panel-size-help-needed/#findComment-1529929 Share on other sites More sharing options...
rodb Posted January 17, 2016 Author Share Posted January 17, 2016 Thanks for the reply. The image does show as indicated. However, what I am trying to do is restrict the area where the image is to show. That is why I was using the plugin which is to resize the image to the desire container. In this case want to limit the width to 2 columns wide. I may have to come up with a may to insure the image does not exceed a specific width. Is there a way to have the image to display in a restricted area? Rod Quote Link to comment https://forums.phpfreaks.com/topic/300484-defining-panel-size-help-needed/#findComment-1529930 Share on other sites More sharing options...
benanamen Posted January 17, 2016 Share Posted January 17, 2016 (edited) I am not really sure what you are trying to do. The easiest way to control the size of a "Large" image is to set the height and width in your img src tag. what I am trying to do is restrict the area where the image is to show. I dont know what that means. To the left? To the right? Center? Next to text? Above text? Below text? Edited January 17, 2016 by benanamen Quote Link to comment https://forums.phpfreaks.com/topic/300484-defining-panel-size-help-needed/#findComment-1529931 Share on other sites More sharing options...
rodb Posted January 17, 2016 Author Share Posted January 17, 2016 Sorry for not being to clear. Basically if the image is large (say 460 by 480) or larger, I would like to display it as a 180 by 200 (for example). I have no control over what size the image supplied by users will be but would like display them in a fix area on the screen. Hope that explains things better. Quote Link to comment https://forums.phpfreaks.com/topic/300484-defining-panel-size-help-needed/#findComment-1529932 Share on other sites More sharing options...
rodb Posted January 17, 2016 Author Share Posted January 17, 2016 Thanks for the help. Did not even think of the properties in the image tag. Just trying to make things harder than they are. Rod Quote Link to comment https://forums.phpfreaks.com/topic/300484-defining-panel-size-help-needed/#findComment-1529933 Share on other sites More sharing options...
Solution benanamen Posted January 17, 2016 Solution Share Posted January 17, 2016 (edited) Just an FYI, you dont have to set both height and width. You can set one or the other. The image will scale proportionally. Edited January 17, 2016 by benanamen Quote Link to comment https://forums.phpfreaks.com/topic/300484-defining-panel-size-help-needed/#findComment-1529934 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.