I am trying to crop a set of images of slightly varying sizes to be squares of matching sizes and make them responsive. I found that it's possible to crop my images by putting them in div's and then making the image a background image, but when I try to use height: auto to get responsive images, the div collapses.
This is the closest thing I can find to my problem:
How to make centre cropped image responsive?
but this solution can only get a square crop if the image is in a portrait orientation to begin with. Additionally, I would have to hand-crop every image according to it's size.
I guess what I am looking for is a CSS hack that could crop all my images to be the same size square and then responsively scale them. Is this wishful thinking for CSS?
Did you try the background-size:cover? it adjust the background image to the size of the container..
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
Related
My website is (https://www.yahoonewsz.com) and I've uploaded an image on the public_html folder in the server.
I have used the following code for background
#main {
background-image: url("image908.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
in advanced CSS section in WordPress.
Why is the image not responsive in mobile?
Thanks.
You're using background-size: cover which according to the background-size docs "Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains."
What this means is that it's scaling to the smallest "non-squished" size it can be that prevents any empty space in the container. Since your site (namely the #main) is roughly 3000px tall on mobile, the background image is being scaled to ~3000px tall.
If you want to constrain it to max width, use background-size: contain which "Scales the image as large as possible without cropping or stretching the image." meaning that it will always fill the container without being cut off. Note this will give you white space under (or above) the image based on your background-position settings.
I am having an issue getting my background image in my header to look right.
Right now, it is set to:
.hero {
background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
background-size: cover;
background-position: center;
}
Ive tried many variations of css to get it to work but cant figure it out. I would like the section to show the full image and keep showing it (not cut it off) as the browser shrinks. As of now, it is cutting on the top and bottom of the image until I shrink down and then it shows the whole thing. When I shrink further, it cuts off the sides.
When I switched the bg size to contain, I was left with a bunch of space around the image on small devices. Any help is appreciated.
Link: http://solatube.solabrite.com/premier-dealer
To do that, the aspect ratio of .hero needs to match that of the image. You can do this by applying a padding to the element with the percentage amount that represents the image aspect ratio. You can get that percentage by dividing the image height by it's width (500/1280 = 39.0625%).
Add this CSS
.hero {
height: 0;
padding-top: 39.0625%;
}
If you usebackground-size: cover, then the image will be scaled until it covers the whole available space.
Maybe try it with background-size: contain, then the image will be scaled until it covers either the x or y dimension of the available space.
BUT: If your image has the same aspect ratio as the area it is trying to cover, neither of this should be a problem though.
I hope this is simple but here is the code I'm doing and it works perfectly except for one thing, the scale isn't kept. It gets wide and then looks silly.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
The image scales when resized and on smaller sizes it looks normal but as it gets bigger (wider) it stretches and looks awkward. How can I make it so the image keeps its aspect and just "zooms" in on itself keeping the whole div covered and the image scaled.
An example of this working on a site is techhubdenver .com with their top div background image
Can this be done with CSS or will I need to get some Javascript coding going to do this.
I know how to make new images for responsive type pages but I was hoping to just use one image and have it work no matter the device. it only becomes a problem when the screen size is way off from the image size (too small or too wide).
if the image would just "shrink" but keep aspect ratio for smaller devices I think it would work and if the image would just "zoom in" staying on the center of the image when the screen size gets to large i think it would work good.
Keep aspect ratio and always fill the div (okay to zoom in) is my goal here.
You need background-size: cover;. That will scale your background such that it covers the element.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
Using background-size: cover I am able to make the background stretch to fit the full width of the page.
Using repeat-y I am able to make the background repeat or tile vertically, to the full height of the page.
Is there any way to combine these two effects? Unfortunately they don't seem to work together (at least in Chrome). It appears that I can either stretch in both directions with background-size: cover, or not stretch in the x direction but repeat in the y direction.
Edit: Using background-size: 100% Npx (where N is the height of the image) I can accomplish the above, but it skews the background image as it's only stretched in one direction. Is there a way to keep it scaling proportionally?
Instead of cover, use background-size: 100% auto; to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y; to tile it vertically.
When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%;, the both look the same.
What is the difference?
When should i use cover and when 100%?
cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.
If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.
Your Question: Why would they looks the same ?
Answer: If the image / container are square
See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example
here's a fiddle: http://jsfiddle.net/RS5kX/19/
background-size:100%; = background-size:100% auto; = the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio.
background-size:cover; means the background image will always fit the whole div , you won't be left with any empty spots in your div
background-size:100% 100%
won't leave any empty space too, but of course this will detroy the original image aspect ratio
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.