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%;}
Related
I've been trying to find an answer online so I didn't have to post, but I can't find a solution!
I'm using a carousel from bootstrap, and my images won't fit. I put the carousel inside a div named "slide". I set width and height on slide, and put a background color to make it easier to see. When I set width in percentage a on my img it resizes to take up the whole width of it's parent container. But when I set height on the img, it makes the image huge!! I want to stretch the image to fit, I don't care about keeping the original ratio. Also if I set the height in pixels or vh it has an affect, the only thing that doesn't work is percentages.
Guys, what am I missing here?
Width 100%
Code
Height 100%
Code
.slide {
width: 300px;
height: 300px;
overflow: hidden;
background: #000;
}
.slide img {
width: 100%;
height: 100%;
object-fit: contain; /* When you use Contain proparty you can see full image with black background*/
object-fit: cover; /* When you use cover proparty you can see it's cover a box as per main div width */
}
<!-- Here I use Display flex instant of float right -->
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
My suggestion is You can use cover CSS.
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>
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 am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far:
http://jsfiddle.net/f9krj/2/
HTML
<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
<img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>
CSS
a.image_container {
background-color: #999;
width: 200px;
height: 180px;
display: inline-block;
overflow: hidden;
}
a.image_container img {
width: 100%;
}
As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?
Original Answer:
If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
Your need, HTML:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
And CSS:
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/
Explanation
DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.
The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;
Now image, this is set to an absolute position with left:50% and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.
Magic moment:
transform: translate(-50%, -50%);
Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.
Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.
This is just a tricky way to figure out centroid of the image and the parent DIV and match them.
Apologies for taking too long to explain!
Resources to read more:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://css-tricks.com/centering-css-complete-guide/
Change your code:
a.image_container img {
width: 100%;
}
To this:
a.image_container img {
width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
height: 100%;
}
http://jsfiddle.net/f9krj/5/
Use max-width property of CSS, like this :
img{
max-width:100%;
}
you can use flex box for it.. this will solve your problem
.image-parent
{
height:33px;
display:flex;
}
If you take answer's Shekhar K. Sharma, and it almost work, you need also add to your this height: 1px; or this width: 1px; for must work.
For me the easiest way to do it without using position absolute, translate.
<div class="img-container">
<img src="yoururl" />
</div>
the CSS should look like this :
.img-container {
height:100px;
width:100px;
overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}
If all your trying to do is fill the div this might help someone else, if aspect ratio is not important, is responsive.
.img-fill > img {
min-height: 100%;
min-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;
}