Link to home
Start Free TrialLog in
Avatar of Starr Duskk
Starr DuskkFlag for United States of America

asked on

Shrink Image Porportionately

I have a table with a panel with an image as the background of the panel. When I grab the edge of the screen to make the resolution or screen width smaller, I'd like to be able to do one of 2 possible things.

First the best thing I'd like to do is when the tab gets smaller, I'd like the image to get proportionately smaller and the table height and width to be smaller proportionately.

User generated image
If that is not possible, I'd like to be able to define how the width is cut off. Notice the image has the main image on the right, but when it gets smaller, it cuts off the right. I'd like it to cut off from the left instead of the right, so that the main image still shows in the remaining width.

User generated image
Are either of those possible?

thanks!
Avatar of Gary
Gary
Flag of Ireland image

Bit hard to debug an image.
Avatar of Starr Duskk

ASKER

eghtebas, I wanted to do this with CSS and tables. I think that's for a desktop application.

Gary, I don't have any code, so there is nothing to debug. I want to know if it is possible and if so, how? using CSS.
It really depends on your markup
If you have an image that is 100% wide and you set the height to auto then the image will automatically scale
Hi Gary,

I appreciate for letting us know. I am reading it through all make sense and I will make sure to follow it.

Regards,

Mike
Gary,
I will try that and then when I have tried it, if necessary, post the code. thanks!
That is just a generic answer, reality is it probably won't be that easy, but when you have something concrete to work with then we can go from there
I am attaching a zip file.

Here I have a minimum height and it is using the minimum instead of the height of the image.

 User generated image
If I make the resolution smaller, it doesn't make the image itself smaller, but cuts off the width.

User generated image
Here is the source code and images.
adminpanel.zip
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That works great, but it is still defaulting to the min-height, instead of the height of the image.

Any ideas? thanks!
I'm not sure which way you are wanting this to go
Use
background-size: 100% 100%;
it still is making my image height my min-height. Here is what my image looks like: how do I get it to default to my max height?

User generated image
Can you do a mockup of how it should look
It shouldn't look scrunched. It should be full height until I shrunk the table width, then get smaller. The max-height is 90px. It's defaulting to the 25 pixels.

        .panModule2, .panModule2:hover {
            max-width: 136px;
            max-height: 90px;
            min-width: 25px;
            min-height: 25px;
            width: auto;
            height: auto;
            background-size: 100% 100%; 
        }

Open in new window

Congratulations,

Mike
Replace your .panModule2, .panModule2:hover {...} class with
       #ModuleLink img{
            max-width: 136px;
            max-height: 90px;
            min-width: 25px;
            min-height: 25px;
            width: 100%;
            height: auto;
        }


Replace
<div class="panModule2"></div>

with
<img src="MODULE.PNG">
Will using the IMG tag allow me to have a hover and non-hover image? That's why I have the panel so I can set a background hover and non-hover mode.
You would have to use js/jquery - there is no other way to scale an image unless it is an actual image tag (without getting very messy with js).
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks!