Hi i want an always fit sceen background image and my index page contains 2 div and each of them got specific background image. Combining these 2 div background ima, i will got a full picture (each div bg img got 1/2 of that picture). The problem is the picture aspect ratio is 3:2 (1200x800 resolution) but background-image: cover CSS is auto scale both width and height so if i got different aspect ratio (such as 16:9, 4:3...), the full picture that combined from 2 divs are not right (wrong height from each div bg img). Is there any way to solve this problem?
cover is not the only option for background-size. It sounds like you should be doing something like:
background-size:auto 100%;
Which will set the background images to 100% height, but auto detect the width. Note that you aren't confined to percentages either:
background-size:auto 500px;
background-size:auto 31.25em;
will also work.
MDN has a solid reference for all the options available.
Related
When I place a background image in my div to create a background for it a scrollbar horizontally for the whole webpage. I think it is because my background-size: cover; made the background image grow to its original size but I want the image to scale down exactly to fit all devices.
Codepen: https://codepen.io/Javscript/pen/WNXmRMp?editors=1100
The scrollbar has nothing to do with the background image, not even with the element which has the background image. (Btw., a background image can never affect box sizing.)
The .main-con element has a width of 100% and a margin of 160px. The 100% does not refer to the remaining space; it refers to the width of the parent element, in this case the body.
So the .main-con element is as big as the body/screen, but has a 160px distance from the left side, resulting in it overflowing 160px on the right side.
One way to counteract this without completly reimplementing your website would be to set the width of the .main-con element to calc(100% - 160px).
Try to use this property:
background-size: contain;
background-repeat: no-repeat;;
The difference between the values cover and contain is that:
1- cover: makes the background covers the whole div
2- size: makes the background fits inside the div
You gave your background Image a size of 100%. But you have allso ur Sidebar. So the Image itself cant take all 100% of the screen. Try using
calc(100% - 160px)
for the with of the .main-con
Let's say in my webpage I have a resizable div, in which I have a picture. I'd like the picture to keep its aspect ratio at all times. When resizing the div, I'd like the picture to be the biggest possible, while keeping its aspect ratio.
For example, if I have a square image and the div is more wide than tall, the image should take up the full height of the div, while NOT taking up the full width of the div, since it has to keep its aspect ratio. The difficulty comes, when I also want it the other way: when the div is more tall than wide, the image should take up the full width of the div, while not taking up the full height.
I can do this with a square picture, but the desired solution would be one that is applicable to arbitrary aspect ratios.
Is this achievable in CSS? (without JS)
Thank you.
You can have a CSS declaration like this:
.some_class {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
*Notes that aspect-ratio is not fully supported. Read the documentation here.
I have a background image that has a large blue diagonal across the back where we want some of our content to line up with.
I am having issues keeping the content inline as it resizes, though (the background diagonal gets bigger or smaller, making the alignment off).
Current css:
background: url('../../../img/bg.png') center no-repeat;
background-size: cover;
What might I need to keep the aspect ratio the same regardless of resize?
https://jsfiddle.net/wb166bdo/11/
To maintain the ratio you could give a top or bottom padding in percentages that equals the ratio wanted. If the image is 200px x 100 px the padding will be 50%. The top and bottom padding in % refers to the width of the parent MDN.
I am trying to make an image fit the browser window in relation to its height and respond dynamically to window size.
I need the image aspect ratio to stay the same but the image can be ,larger than its originally resolution if viewed on large screens.
I don't want the image to spill outside of the screen and create a scolling effect.
The image must stay centered inside is container both vertically and horizontally.
Here is an example of what I am trying to achieve.
It is not clear what you tried so far and we don't see any code. I'll try to answer anyway and perhaps it'll help you.
First of all, when you working with responsive layouts, always try to size your elements with viewport height and width. This helps you keep your content relative to the browser size - no matter if resized nor how large the screen is.
This code might help you insert a responsive image to your site:
div {
width:80vw;
height:80vh;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
Working example here
In this example is div sized 80% of both window's height and width, so it never exceeds the viewport. Max. measures of img are 100% of the div and height:auto; secures that it preserves its aspect ratio. Image then fits a div to the max allowed. You can comfortably center the image by setting display:table-cell; vertical-align:middle; text-align:center; to the DIV.
Another solution would be:
background-image:url(' ');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
Check it out here
Using the object-fit CSS property, you can do it without a container:
img {
height: 100vh;
width: 100%;
object-fit: contain;
}
See the browser support.
To do something like your exemple, you can use background-size:cover.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off
Also see this plunker : https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview
Is there a way, using solely CSS, to set an image's height to its container's height, while maintaining aspect ratio, allowing the width to overflow and be hidden? That sounds like a lot of requirements, but surely there's a way. What I mean is, I want the full height of the image to be displayed, but if the width is wider than the container allows (using bootstraps grid system), then just overflow: hidden. I have the height set to 100% which looks good, but the picture squishes in from the sides to fit inside the container rather than overflowing and being cropped. By setting width to 100%, it's filling the container. I believe it's using the container as the standard for the 100%, rather than the aspect ratio of the photo. So that's what I need to do.
This is what I have going on:
<div style="width:150px; height:150px; display:flex; flex-direction:column">
<img src="http://i.imgur.com/RiX7XfW.jpg" alt="Banana" style="height:100%;width:auto;overflow:hidden">
</div>
TL;DR I need to maintain aspect ration of an image, lock the height to the container height and let the excess of the picture just overflow and be hidden, allowing me to see the maximum amount of the picture possible, while still filling the container.
Bonus points if there's a way to somehow calculate which dimension is smaller and lock that one to the relevant container dimension.
Not so easy to do this if using an image tag, but if using the CSS background-image property (or the shortcut background), then
#wrap{width:300px;height:200px;margin:50px;overflow:hidden;}
#imgDiv{width:1000px;height:1000px;background-image:url(http://placekitten.com/900/900); background-size:cover;}
<div id="wrap">
<div id="imgDiv">
</div>
</div>
Are you suggesting overflow: hidden in the CSS? It's a routine default measure, and you speak around it, like you might be recalling the measure.
Not setting a height, and setting width: 100%, is a nice way to regard the aspect ratio with more concern to the full width. So height: 100% without a specification for width may be a best way to keep full height with aspect ratio intact.
Instead of embedding the image with an img tag, you can set the image as the background image of the container. Then by using a combination of background-size:cover; and background-position:center center; you can cause the image to match the height of the container while keeping the aspect ratio of the original image. The background-position property will center the image so that the left and right sides are cropped off.
Using shorthand, that code would look like this:
<div style="background:url('http://i.imgur.com/RiX7XfW.jpg') center center / cover no-repeat; width:150px; height:150px; display:flex; flex-direction:column"></div>