I'm trying to scale my button's height appropriately so that the background-image properly fills out the entire image based on the new width of the button.
Here's the code I'm using which isn't working.
.auth-button {
background: rgba(0, 0, 0, 0);
background-image: url(../img/auth/facebook-connect.png);
background-size: cover;
background-repeat: no-repeat;
border: none;
padding: none;
width: 90vw;
height: calc(calc(161/953) * 90vw);
max-width: 953px;
max-height: 161px;
}
Please note that I'm using SCSS so there's actually not any nested calc()'s. In stead I have a variable set up $authButtonAspect: calc(161/953) and do height: calc($authButtonAspect * 90vw)
Ultimately, this should multiple the new width of the image (90% vertical width) by the aspect ratio and give a new height, but.. it doesn't.
161 is the height of the background image and 953 is the width of the background image.
EDIT Yes, I know I can do this in Javascript, looking for a CSS solution.
The key point to remember when creating a responsive button with background image is that,
the padding is always calculated based on the width.
Since height cannot be calculated in percentage, make the height of the button equals to zero and then control the button display height through either padding top or bottom.
When the parent element around the button resizes and there by increase the button width, results in the respective padding top calculation based on the current size of the element.
With above information, we can create a responsive button using css as shown below
a.img-btn
{
background:url("../mybutton.jpg");
width:50%;
padding-top:50%; //Same width and padding will create a square
height:0;
}
You can check more about maintaining aspect ratio over here
Check the sample CSS for a custom button for dimension that you've requested
.btn{
background:transparent url("http://placehold.it/953x161") no-repeat 0 0;
background-size:100% auto;
width:75%;
padding-top:13%;
height:0;
display:inline-block;
text-align:center;
}
.btn span{display:none;}
<span>Test</span>
Related
I've to display some html images in my application whose width can vary greatly but the important part of the image is always on center with a width of approximately 120 px.
Trying to display the image with all its width (or even with a percentage of it) produces some other things of the application not to display properly and if set to a certain width the image can become extremely deformed.
So best thing to do would be to create a div of fixed width and no scrollbar which would only show the center of the image, so if the image is for example 400 px it should show from the width pixel 140 to width pixel 260 if 600 from 240 to 360 and so on (borders wouldn't show).
I see no way with my knowledge to do something like this, hope you can guide me, thanks.
If you know image size you can do like this
.image {
position: relative;
width: 200px; /* Outer box width */
height: 200px; /* Outer box height */
overflow: hidden;
}
.image img {
position: absolute;
left: 50%;
margin-left: -150px; /* 50% of image width */
}
You could create a div with your image as background and give it this CSS property:
background: url(path to your image) no-repeat center center;
If you want the image to have an optimal size to fit in the container you can use:
background-size: cover;
I want to set image in img tag, without cropping it or stretching it.
That is, the image ratio I have set is 1:1 but image may vary in aspect ratio, so I neither want to change the aspect ratio nor want to crop it vertically or horizontally. my images are changing dynamically.
I have checked multiple solutions for eg: This one which suggests either crop height or width. But I don't want both.
Currently I am at this:
HTML:
<div id="container">
<img id="imgHolder" />
</div>
and CSS
#container{
height: 100px;
width: 100px;
background-color: yellow;
overflow: hidden;
}
#imgHolder{
height: 100%;
/* OR width: 100%; */
}
Help. I prefer CSS only.
you can just set both the max-width and the max-height of your images
#container img {
max-width: 100%;
max-height: 100%;
}
Doing so the image won't be stretched since your not changing its width or height: whatever is the image size, setting the above properties together ensures that the longest side is reduced to the maximum width (or height) of its parent div, while the other one can freely adapt itself, keeping the original image ratio.
Example http://codepen.io/anon/pen/qEjLZa
Example with centered images (both ver. and hor.): http://codepen.io/anon/pen/NPgege
If you set a height and width on the parent container, it is hard to retain a perfect aspect ratio without stretching or cropping the image. If the image is the same size, 100px x 100px then you could use
CSS
#container{ position: relative; width: 100px; height: 100px; }
img{
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
This will set the image to cover the parent container. You could also try
img {
background: url( yourimage.png) cetner no-repeat;
background-size: contain;
}
This will set the image to fill the larger of the dimensions to the parent container and will center it. The smaller dimension will not be covered, but it will retain is apsect ratio.
I want to set the image as a background in a div so that the source can be changed for each device for its image resolution. the problem is I don't want to set the height of the div, but only it's width which is 100% so that it can be fit with the device window's width. Therefore, I want the height is automatically generated based on the width of the div.
I have set the height of auto, but the div is not appear unless I set the height with value.
#imagetree {
position:absolute;
z-index:12;
width:100%;
height:auto;
bottom:0;
overflow: hidden;
background: url(images/trees.png);
background-repeat: no-repeat;
}
if you knew in advance the ratio between width and height of your image you could cheat using a proportional padding-bottom
E.g If your image were 300x180 you may use this css
#imagetree {
position:absolute;
z-index:1;
bottom:0;
overflow: hidden;
background: url(http://dummyimage.com/300x180/000000/fff.jpg);
background-repeat: no-repeat;
width: 100%; /* use 100% of width */
padding-bottom: 60%; /* 180px is 60% of 300px */
background-size: cover; /* cover the div entirely with the background */
}
Example: http://codepen.io/anon/pen/ruBFt
When you give position: absolute, the height and width are not set initially. You need to manually set them using CSS. In your case, since you have put background as an image, being positioned absolutely, why do you wanna set it as background-image?
You can put the image in the <img /> tag itself and then render with normal widths and heights that are proportional to the image too! Change your code by adding an image inside the absolutely positioned container.
<div id="imagetree">
<img src="images/trees.png" />
</div>
And in the CSS, you may wanna give this:
#imagetree img {max-width: 100%;}
.step-1-4 {
background:url('../images/gadget-4-sprite.png')
no-repeat; width:950px;
height:70px;
margin-left: 15px;
}
Above is the CSS for a div I have which holds a background-image. I have set the height and width of the div the same as the dimensions of the image. The problem i'm having is when the window is re-sized for example less than the width of the image, it gets cut off.
Is there a solution whereby I can style the CSS in such a way that the div re-sizes along with the image inside it. I have tried making the width of the div 100%, which re-sizes the div correctly, however the image still does not re-size. Maybe if this is not a good solution, then how can this be achieved using an <img> tag.
use background-size:cover; or background-size:100% 100%;
so your css will be ::
.step-1-4 {
background:url('../images/gadget-4-sprite.png') no-repeat;
background-size:100% 100%; /*..or cover ...*/
width:950px;
height:70px;
margin-left: 15px;
}
I want a <img> whose width is 40% of the page, and it gets stretched.
How can I resize it without stretching?
For example, if I have a image whose file originally looks like this:
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
__888_____
__888_____
__888_____
Any trick (putting it into a <div>'s background) is okay.
Width and height are unknown.
Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "After limiting its width to 40% of the page", which means before width-limiting it should looks normal.
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
Example:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>
If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
Example:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>
Hope this helps...
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )
The first as a plain image of unknown size. This displays at whatever size it happens to be.
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
This says "Go"
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
Try to use ImageResizer.
Here's the link : http://imageresizing.net/
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div