Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 181
  • Last Modified:

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!
0
Starr Duskk
Asked:
Starr Duskk
  • 9
  • 8
  • 2
2 Solutions
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
GaryCommented:
If you add to the div

background-size: 100% auto;
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

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 9
  • 8
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now