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.

1
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.

2
Are either of those possible?

thanks!
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
 
GaryCommented:
If you add to the div

background-size: 100% auto;
0
 
GaryCommented:
Bit hard to debug an image.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GaryCommented:
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
0
 
Mike EghtebasDatabase and Application DeveloperCommented:
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
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Gary,
I will try that and then when I have tried it, if necessary, post the code. thanks!
0
 
GaryCommented:
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
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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.

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

2
Here is the source code and images.
adminpanel.zip
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
That works great, but it is still defaulting to the min-height, instead of the height of the image.

Any ideas? thanks!
0
 
GaryCommented:
I'm not sure which way you are wanting this to go
Use
background-size: 100% 100%;
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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?

1
0
 
GaryCommented:
Can you do a mockup of how it should look
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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

0
 
Mike EghtebasDatabase and Application DeveloperCommented:
Congratulations,

Mike
0
 
GaryCommented:
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">
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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.
0
 
GaryCommented:
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).
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I go it to work! (my table's messed up, but that's another topic)

1
After I grab the edges and shrink it:
2
I added a hard height. Put back this the way you had it: background-size: 100%; and added: background-repeat: no-repeat;
I have these in my style:
.panModule,.panModule:hover {
max-width:136px;
max-height:90px;
min-width:50px;
min-height:50px;
width: auto;
height:90px;
background-size: 100%;
}
.panModule  {
background-image: url('/Site/Images/LayoutImages/AdminPanel/MODULEFADE.PNG');
background-repeat: no-repeat;
}
.panModule:hover  {
background-image: url('/Site/Images/LayoutImages/AdminPanel/MODULE.PNG');
}

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.