I am trying to make a slider with background images, when I am trying to make it fit to the mobile screen, the proportion is affected and look as pixels, how can I resize the background-image to fit the mobile screen without affecting the proportion.
and when I increase the height to :
background-size: 100vw 55vh !important;
height: 55vh !important;
You can use the object-fit property to maintain the aspect ratio of the image:
img {
height: 55vh
object-fit: contain;
}
contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
Instead of fixing both height and width of the image, just define the one which you need (for example width) and set the other one to auto. For height that would be:
background-size: auto 55vh;
height: 55vh;
that way the original image proportion will be kept, avoiding a distorted image.
you can use this CSS:
{
background-size: contain;
background-repeat: no-repeat;
}
if it didn't work please share your code. I know I can help you.
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'm writing an html page with parallax using stellar.js.
In CSS I use:
html, body {height: 100%;}
#slide1 {
height: auto;
background-image:url('../images/1.jpg');
background-color:#fff;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; }
But the image is cut and the bottom of the image is not visible.
Is it possible to set the height of the section (#slide1) to show all the image?
Using background-size:cover; will always crop your background image either vertically or horizontally, except when the element has the exact same h/w ratio as the image. The key is to choose and position the background in such manner that it still looks good when it is cut.
Most likely, you want to give your element a min-height, e.g.:
#slide1 {
min-height: 600px;
}
Keep in mind the most popular desktop ratio is 16:9 and most mobile devices are held vertically. If necessary, use #media queries for different device/viewport widths.
If you don't want your slide to have a larger height than the viewport height (deviceScreen|browser height), add max-height: 100vh!important; to the above rule (useful on mobile devices).
Try setting #slide1 height property to 100% instead of using auto.
My PNG picture size is 1000px by 1000px.
I use it as a background image in a DIV which has a height of 550px and a background-size: cover property.
My issue is that this background-size cover does not seem to be working. My picture is not scaled down to the size of the DIV. What is the issue?
Without seeing your actual code, answers can only be based on assumptions but I am assuming that my assumption must be correct in this case based on the screenshot provided.
From the screenshot, it seems like your element doesn't have a fixed width and is taking up 100% of the available width and also that the width is a lot higher compare to the height of the element.
(The above assumption has been confirmed by your live link.)
As per specs, the cover keyword has the following definition:
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
The key parts that are relevant for this question have been emphasized. As you have indicated, in this case, the image's dimensions is 1000 x 1000 whereas the container's dimensions is [Y] x 550 where [Y] seems to be higher than 550. Now, let us assume that [Y] is 750. This would mean that the image will be scaled such that it has to fit the entire width (as it is larger). Since image has 1:1 aspect ratio, it would be scaled down to 750 x 750. Thus the image's height is greater than the container's height and so the bottom part of the image will get cropped.
You can see that in the below snippet also. The first image is the background with cover whereas the second is the actual sized image.
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
You can use background-size: 100% 100%, it will make the image fill the entire height and width of the container but it will not preserve/maintain the aspect ratio of the image.
Alternately, you could make use of background-size: contain, it would preserve the aspect ratio but it will leave white space on the left and right if the width is larger (or) on the top and bottom if the height is larger.
Demo with width being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
Demo with height being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
max-width: 450px;
/* just for demo */
border: 1px solid;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
Use background-size 100% 100% instead, should solve the issue.
this is a weird one because there are a lot of aspects out of my control. I'm working with a custom image carousel where the image is a background image and the containing div has a set width and height (these can't be changed) but things like background-position and background-size I can manipulate.
The problem comes from images of varying aspect ratios. If I just try manipulating the width and height, the image gets cropped. Trying something like:
background-size: 100%
will work with images that are wider, while:
background-size: auto 100%
works better for taller images.
background-size: cover
crops both sizes and in a perfect world I'd like to find a CSS only solution. Does anyone have any ideas on how to make images of both aspect ratios completely fit into the same sized div?
You're looking for the contain value:
contain
This keyword specifies that the background image should be
scaled to be as large as possible while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.
body > div {
height: 500px;
width: 500px;
}
.tall {
background: #F00 url(http://www.placehold.it/500X1000) center no-repeat;
background-size: contain;
}
.wide {
background: #F90 url(http://www.placehold.it/1000X500) center no-repeat;
background-size: contain;
}
<h2>I contain a tall image!</h2>
<div class="tall"></div>
<h2>I contain a wide image!</h2>
<div class="wide"></div>
I am loading a while bunch of photos onto my page and they are all different sizes. I need to bring them all down to the same size* (which is: x200px by y400px) _while maintaining aspect ratio.
How do I do this in pure CSS?
The following CSS class will restrict them to the sizes you specified. diffferent aspect ratios may have smaller height or width but the aspect ratio is maintained
.yourimage{
width:200px;
height:400px;
background-image: url("yourimage.png");
background-size: contain;
background-repeat:no-repeat;
background-position: center ;
}
here is a fiddle with example
http://jsfiddle.net/LgZtD/
CSS cannot change the sizes of your images, that's not what it is for. You will lose the aspect ratio if you insert the images into img tags with width:200px and height:40ppx.
What you can do though is use CSS to show a 200px x 400px element with the image as a background, and then use the background-size property to have the image cover the 200px x 400px space. CSS will find the most efficient way to cover that area without changing the size of the image
.image {
width: 200px;
height: 400px;
background-image: url(/url/to/image);
background-size: cover; //This will cover the area of the image
background-position: center center; //Have the image centered
}
http://codepen.io/herihehe/full/aLwGt
This is a great example of what you want. Look at the difference between contain and cover. Contain shows the actual size of the image. Cover "covers" the area
I think this is what you are looking for:
img {
height: auto;
width: auto;
max-height: 400px;
max-width: 200px;
}
Fiddle example here