I have used a div-Container to insert a logo in it like this:
<div id="logo"></div>
The css looks like this:
#logo {
width: 333px;
height: 200px;
background-image: url("../img/logo1.png");
background-image: url("../img/logo0.svg");
}
However, when I try to rezise #logo (for example for devices with smaller screens), it does not resize the image being the background and the image is cut at the edges.
My question is: How to scale the .svg-image while the div-container is scaling?
Use background-size: contain;
Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
html {
min-height:100%;
background:url(http://kompozer.sourceforge.net/images/logo/kpz08-chinon.svg) no-repeat;
background-size:contain;
}
Related
I am attempting to set the background image for an application, however, the image is zoomed in rather then neatly covering the page. How do I get the image to properly fit to the size of the website.
The code looks as follows:
body {
background: url(http://www.1zoom.net/big2/155/323865-alexfas01.jpg) no-repeat top right;
}
background-size: cover;
From https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
"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."
body {
background: url(http://www.1zoom.net/big2/155/323865-alexfas01.jpg) no-repeat top right;
background-size: cover;
}
I'm trying to set the background image using CSS but the original image is stretched.
How do I keep the original image size and set the background for the entire page at the same time?
body {
margin: 0;
background-image: url(background.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
The original image is: Original Image
And the result is: Resultent Image
The difference is the background in my web is larger than the original.
Any help would be appreciated !!!
All you have to do is to remove background-size: cover,
then all should be fine.
You have a lot of options regarding the background image and size.
For your needs you can check this W3c and try the different options you can apply.
Remember that since you apply CSS to your Body, all your pages will "follow" those rules. But some of your pages might have different height from the others.
The result also, depends on the screen resolution of the client.
You have to deside what is your desired result in all screen resolutions.
Try to remove background-size:cover; & set width of image to your requirement.
background-size:cover;stretches the image to full background.
or
Please change your image extension from .png to .jpeg or .jpg because .png always stretches your image and after that the css property u have defined earlier will work properly.
What you can do is just remove, background-size:cover;
Now let's see what does that mean,
background-size
Because background-size CSS property specifies the size of the
background images. The size of the image can be fully constrained or
only partially in order to preserve its intrinsic ratio.
cover
A keyword that is the inverse of contain(contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container). cover 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.
To get much identification just try JSFiddle
For the more reference on background-size:
remove background-size: cover;
Thanks.
I found the problem.
the source image is open with a zoom of 35% therefore when I set the backgroud it stretch to 100%.
body {
margin: 0;
background-image: url(background.png);
background-size: 60% 60%;
background-position: center center;
}
Try like this:
.your-class {
background-image: url(background.png);
/* Required Height */
height: 800px;
/* Center and scale the image nicely */
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
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
Hi I am trying some stuff out with html and css to see what works and what doesn't, and I was wondering if it is possible to make an image stay in the center of your screen and always adapt to the size of the screen. For example an image that when I look at it on a screen that's 1920*1080 is 192*108 large and when I look at it on a 1600*900 screen it becomes 160*90 whilst the center of the image stays in the middle.
PS: It doesn't matter that the resolution of the image changes even though it makes the image sometimes look terrible.
You can't do this with just an image tag. You could put the image you're using as background-image and then set the sizing to cover. Basically this:
body {
background-image: url('url/to/your/image.jpeg');
background-size: cover;
background-position: center center;
}
To adapt to the size of the screen,place image in container and then do :
img{
width:100%;
height:auto; /*maintains aspect ratio */
}
now image will have the dimension of container!!
To align image in center of your div...do:
div{
width:80%;
margin:0 auto; /*align div in center first*/
text-align:center /*center content*/
}
taken from
Use CSS to make an image scale up and down
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past its natural size, so it doesn't look deformed.