Jump to content

Defining panel size - help needed


rodb
Go to solution Solved by benanamen,

Recommended Posts

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

Link to comment
Share on other sites

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 by benanamen
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by benanamen
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.