I have div with absolute height and width:
<div style="height: 500px; width: 300px;">
I want to put a background image (width 500px; height 1500px ) to fit the width of the DIV, but i want to let overflow the height of the div. I don't want to loose proportions of my image.
Image is generated dynamically, sometimes is height smallest than a div height. I need to be always cover on width, don't care about height.
Is in CSS some way to do it without need of using javascript?
background-size: cover value works only when image height is smaller than div height.
Im finding something like:
background-size: 100% default;
Should be
background-size: 100% auto;
Try:
.element {
background-size: cover
}
Related
I'm working on a project where I have to give a background-image a full width. The image should become larger as I make the screen larger, and smaller as I make the screen smaller.
This is my code at the moment. It's a footer decoration:
.footerDeco {
background-image: url(../resources/image_geometry_2.svg);
background-repeat: no-repeat;
height: 160px;
background-size: cover;
}
The background-size: cover makes the image adapt to full width, but the height of the image remains 160px no matter what. If I make the height larger, then it's a problem because it doesn't shrink back proportionally as the screen becomes smaller.
I have tried giving it a height auto or a height 100% expecting the height to change proportionally to the width. (I do understand this height is the height of the footer container, but I don't know how to change it otherwise).
I know it would be much easier to use an img tag. But the demands of the project and good practice insist that since this is a decoration, I should use the background-image property. Is it possible? Thanks!
P.S.: There are similar questions that have been answered here, but none of them (as far as I can tell) solve the problem of the image resizing past the constant container height of 16px.
To make the height change proportionally to the width, you can use vw to specify the height, for example:
.rooterDeco {
height: 20vw;
}
maybe for a size of 100% it will work
background-size: 100% 100%;
using percentage makes the element one size relative to the size of the parent element.
You can use aspect-ratio.
.footerDeco {
aspect-ratio: 16 / 9;
background: url(https://www.fillmurray.com/g/300/200);
background-size: cover;
}
<div class="footerDeco"></div>
I have a div container which contains an img with height of 311px.
The parent container follows the height of that image, but I want my container to have a height of 532px.
I have set the image CSS to width: 100%; height: 100%; object-fit: cover; so that the image, even small, will still fill the container without any distortion, but I need to make the container to be responsive even when the screen gets smaller, and I've set the height to 532px so when the screen gets smaller, the height of div remains the same.
Is there any way to set a "default" height to div container, but adjusts when screen gets smaller?
here is the code html:
<style>
.inside-img{
object-fit: cover;
width: 100%;
height: 100%;
}
.container{
height: 532px;
}
</style>
<div class="container"><img class="inside-img" src="img.jpg"></div>
thanks in advance.
You should use min-height:300px; this sets the minimum height for your container and can be adjusted
Is there a way to scale background-image with CSS only to a particular height in pixels and 100% of the parent container, which can change depending on the viewport width.
I've attempted using background-size: inherit; but it seems to just placing image as in auto
I event tried using:
background-size: 100vw 300px;
It doesn't seem to like the vw... Unfortunately I cannot use:
background-size: cover;
because it will crop from the bottom is the width of the container exceeds that of the image.
So I have an image which is 700px width which is what I'm using as a background image in a div which is 200px width.
I want to keep the image at that size so it can maintain a good resolution for smaller devices.
However the issue I'm having is because the image is larger than the div the image overflows (hidden) but I want the image to resize and fit depending on the size of the div, instead of overflowing.
My div is currently:
.featurebox{
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;
width:200px
}
Define both width and height and then use background-size: cover
Try adding this:
background-size: 100% 100%;
if you use
background-size: 100%;
the height is set to auto, and can then still overlap.
can you try this?
background-size:100%;
You can set background-size:
.featurebox {
background: #F9C112 url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center top;
background-size: 200px 200px;
width: 200px;
height: 200px;
}
<div class="featurebox">
</div>
I have an image in a website (the website is responsive). the image should always have 100% height of the parent div (that has a height of 100%) but with aspect ratio.
my example
I tried with CSS:
max-height: 100%;
max-width: 100%;
width: auto!important;
But this way the picture has always 100% height of it's original size. I want it bigger than it's original size, but with aspect ratio.
Change the CSS to:
height: 100%;
display: block;
float: right;
By removing all width references, most if not all browsers will scale it proportionally and keep the aspect ratio. By specifying the height as 100%, it will fit the height of the image to the height of the parent container and stay responsive.
Have you considered changing your CSS to the following?
img{width:100%; height:auto;}
That way all of your images will respond to the width of their parent element and keep their aspect ratio
Use the CSS tags "width" and "height" to make it bigger. For example:
width: 200%;
height: 200%;
Good luck!
*Fiddle Demo