in this page
http://demos.roxiwd.com/index.php/ar/kgar
How to show images normal like the next row
and how to show the words once the mouse hover any point on image not the word area.
img:hover .words {
display: block;
}
The biggest problem is that you have a dynamic column width and a fixed height on your image containers (with background-size set to 100% 100%). This results in deformed images. You say you want to change that on hover. To do so, you first need to reset the height of this container:
.uc_animated_border_banner:hover .uc_animated_border_bg {height: auto!important;}
Next you should use the padding trick to set the (now dynamic) height equal to the aspect ratio. The aspect ratio of the image is 450px/350px = 1.29. This equals to 129% padding-bottom. Correct this for the line-height of the element that actually takes up verticale space in the box (the h2, with a height of 30px) and you end up with 129% - 30px for the padding-bottom. Split this for equal padding top and bottom, and you end up with 64.5% - 15px padding on both top and bottom of the h2 element. This results in a box with an exact aspect ratio of 1.29 (as long as the h2 fits on a single line).
.uc_animated_border_banner:hover .uc_animated_border_banner .uc_content_box h2 {
padding-top: calc(64.5% - 15px)!important;
padding-bottom: calc(64.5% - 15px)!important;
}
TIP: Use position: absolute on the h2 for a solution without the 15px/30px and single-line constraint.
Although this works I would chose for a more simple solution. Find the inline CSS statement at line 214:
.uc_animated_border_bg {background-size: 100% 100%!important;}
... and replace it with:
.uc_animated_border_bg {background-size: cover!important;}
I think the result looks better and the solution is much simpler. This alternative solution works for any image (irrespective of their aspect ratio). The only down-side is that an unknown amount of the image is invisible/cut off.
Related
I have a full screen web app. I'm using CSS 100% height on HTML, body and parent elements. I have a contents table which grows as items are added to it. I am trying to have a vertical scrollbar automatically appear when there is not enough space.
I have tried using different combinations of overflow-y:auto; overflow:auto; on the tbody, table and the surrounding div (which is also 100% height) but nothing seems to work. Is it even possible with 100% heights? Does overflow require a fixed height?
Edit
Here is some code. The left hand column contains the table to which I'd like to add a vertical scrollbar when there's not enough space.
https://jsfiddle.net/468cpvmv/
Unfortunately, you're using a table in a faux-table which makes it much harder to do this right.
You're setting the fieldset > div to it's inherited height which is the height of the table inside.
If you instead base it off the viewport height, you can get your desired result, specifically using calc. Currently you have 45px of "extra stuff" (padding, headers, etc.) that you want to remove from the calculation, so you can add this declaration:
.page-contents .left-col fieldset > div {
max-height: calc( 100vh - 45px );
overflow-x: auto;
}
Here's a fiddle: https://jsfiddle.net/468cpvmv/9/
These are the heights you want to subtract in your calculation:
The div in which I have a background image is of unknown size. It can be 16px high, it can be 1600px, and anything in between. There's a background-image in there that's roughly 440px wide and 250px high.
When the div is higher than 250px, the background image doesn't scale. That's desired behaviour. So far so good.
If the div gets under 250px in height, the background-image is clipped. That's unwanted: I want it to scale to the div's smaller height.
How do I use css (or, if not possible, js) to have a background-image scale down when it doesn't fit its div, but never scale up when the div is bigger than itself? Essentially, I want to use background-size: contain;, but with a max set to the image's height.
I tried all kinds of cover and contains, but none have the desired effect.
This question does not help either, for I cannot set a max-height on the div. It contains content added by the site's editor. If that's a lot, all of it must show.
Here's a fiddle: http://jsfiddle.net/Bakabaka/2zetkrg0/
Is simply inserting an img inside the element you wanted to give a background to an option?
You can use max-width:100%; max-height:100%; on the image, so it will not exceed the container dimensions, but will still retain its aspect ratio and won't grow larger than its original size. Next, you could position the image absolutely and give it z-index:-1 so it'll be behind all the content and won't be affected by it. Finally, just give the image top:50%; left:50%; transform:translate(50%,50%); if you want it centered within its container.
Here's a demo: https://jsfiddle.net/ilpo/9dnqd6bc/1/
You could even set min-width and min-height, if you wanted to have a minimum size for the background.
Try this, hope it'll work :)
container{
background-image: url("/assets/pic.jpg");
background-size: cover;
background-repeat: no-repeat;
max-height:250px;
}
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I'm trying to hide a background-image (that is scaled with background-size) using background-position.
I'm purposely not using visibility or anything that will cause a relayout as such has been causing minor fluctuations in the rendered output when toggling back into view. Additionally, my current application limits me from using pseudo-elements as a hack/workaround.
div {
background: url(image.png) no-repeat 200% 200%/100%;
height: 100px; /* half height of image */
width: 250px; /* half width of image */
}
Unfortunately, the image is not getting positioned. If the /100% is removed, the positioning works correctly.
jsfiddle: http://jsfiddle.net/prometh/60jtpust/
Update:
Curiously, it works when the background-size is 50%: http://jsfiddle.net/60jtpust/8/
The problem is that
3.9. Sizing Images: the ‘background-size’ property
A percentage is relative to the background positioning area.
And
3.6. Positioning Images: the ‘background-position’ property
Percentages: refer to size of background positioning area minus
size of background image, [...] where the size of the image is the
size given by ‘background-size’.
Therefore, if you use a background-size of 100%, the percentage is background-position will refer to 0. So it will be 0.
Percentage values for background-position have funky behavior with relation to background-size, which I explain in depth, complete with a sliding puzzle analogy, in this answer. Unfortunately, because the background image fits the box exactly due to background-size: 100%, you won't be able to position it using percentage values. From the final paragraph of my answer:
If you want to position a background image whose size is 100% of the background area, you won't be able to use a percentage, since you can't move a tile that fits its frame perfectly (which incidentally would make for either the most boring puzzle or the perfect prank). This applies whether the intrinsic dimensions of the background image match the dimensions of the element, or you explicitly set background-size: 100%. So, to position the image, you will need to use use an absolute value instead (forgoing the sliding-puzzle analogy altogether).
The reason it works with background-size: 50% is because the image is now given space to move around. At the same time, the sliding puzzle analogy now falls flat because the percentage values you've set for background-position are greater than 100%...
Anyway, in your specific example, the absolute values are equal to your element's width and height properties respectively (note: not the actual image dimensions):
div {
background: url(image.png) no-repeat 250px 100px/100%;
height: 100px; /* half height of image */
width: 250px; /* half width of image */
}
Updated fiddle
If you cannot hardcode these values, e.g. if you need this effect to apply across elements of different sizes, then unfortunately you will not be able to use background-position to hide the image.
I have the following html
<a class=logo></a>
I want to replace it with my logo. But I want the logo to take up 100% of the vertical room, and an amount of horizontal room that will leave the image proportional
I could try to do
.logo {
background-image: 'logo.svg';
background-size: auto 100%;
}
except I would still need to set a height and width in order for it to take up space.
I could try to do
.logo:before {
content: url('logo.svg');
}
except the only way to set the height and width of the image is with
zoom: X%
or
transform: scale(50%);
and neither of these will react to changing heights
Is there any other way I'm missing?
Edit: fiddle - how can I get the width correct here?
If you're wanting a proportional box with 100% width and a height that matches the aspect ratio of the background-image, set the vertical padding to a percentage that matches the vertical ratio.
i.e. if your logo is a 2:1 rectangle, set your width to 100% and your padding to 25% 0 and your tag will stay proportionally sized (you'll need to set it to display: block;). Then background-size: 100% auto (or the other way around) should work because the background image's aspect ratio is the same as its container.
fiddle
I have an image that's inline with text. That image is 32x32. I'm looking to have it auto size to the line height of where it's contained so it fits properly. Is there a way to do that?
I'm looking to be able to place the image anywhere with an unknown line height and have it resize properly.
Use img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*
See this Updated Demo (Increase or decrease the font size to view the result.)
You can set the height to the line height if you explicitly set both, e.g.
* { line-height: 1.3; }
img { height: 1.3em; }
If you don’t want to set the line height, you would need to make a guess on browser defaults (which usually depend on font). This might be a good guess:
img { height: 1.12em; }
To make an image fit properly into text, so that it does not cause the actual line height to be increased, you would also need to align it vertically to the bottom of the line box, no to text baseline (which is higher):
img { vertical-align: bottom; }
If you need to let the image sit on the baseline (the default), you need to make a guess on the distance between the bottom and the baseline and set the image height accordingly smaller. In this case, height: 1em, or maybe with a little smaller value, might be a good guess.