Starr Duskk
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.
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.
Are either of those possible?
thanks!
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.
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.
Are either of those possible?
thanks!
Bit hard to debug an image.
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.
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
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
I appreciate for letting us know. I am reading it through all make sense and I will make sure to follow it.
Regards,
Mike
ASKER
Gary,
I will try that and then when I have tried it, if necessary, post the code. thanks!
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
ASKER
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.
If I make the resolution smaller, it doesn't make the image itself smaller, but cuts off the width.
Here is the source code and images.
adminpanel.zip
Here I have a minimum height and it is using the minimum instead of the height of the image.
If I make the resolution smaller, it doesn't make the image itself smaller, but cuts off the width.
Here is the source code and images.
adminpanel.zip
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That works great, but it is still defaulting to the min-height, instead of the height of the image.
Any ideas? thanks!
Any ideas? thanks!
I'm not sure which way you are wanting this to go
Use
background-size: 100% 100%;
Use
background-size: 100% 100%;
ASKER
Can you do a mockup of how it should look
ASKER
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%;
}
Congratulations,
Mike
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">
#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">
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks!