Fitting a image into a div and maintaining the aspect ratio isn't that hard. But trying to keep the selected area in the center of an image is the hardest part.
What happens is that the image will zoom out to the top-left, while I want it to stay in the center, because people often take pictures where the biggest attraction is in the center of a photo.
This is the code I use now:
.cover-photo {
width: auto;
height: 60vh;
background-color: lightgray;
position: relative;
margin: 60px 0 0 0; //There is a header above this div
overflow: hidden;
background: url('../Img/cover_photo.jpg') no-repeat center center;
background-size: cover;}
It's supposed to be like a cover photo of a facebook profile. If you have any suggestions or solutions, I would like to hear them.
You can use different kind of approch instead of worrying about which area should I zoom? use jquery image cropper(there are many this kind of plugins )
demo
https://github.com/scottcheng/cropit/
Related
I have been reading many solutions to this and tried most of them, but unfortunately I cannot get it like I want it working for all browsers.
What I basically want is to automatically crop images (from the center) to a defined aspect ratio. This should apply to "portrait" images (cropping on top and bottom) and also to landscape pictures (cropping left and right). It has to be responsive so that the images will always have the desired with (and height using the aspect ratio).
It is described well here: Center Crop Images but as in that solution I do not know if the picture will be to wide or to high.
I also cannot and don't want to work with background images.
I could get it to work to crop on top and bottom but when the image is wider than the desired aspect ratio it will "crunch" the images to look distorted.
Here is one of the solutions that worked partly:
/* wrapper div */
.iw-so-article-thumb {
position: relative;
overflow: hidden;
/* text-align: center;*/
/* ensures the image is always in the h-middle */
border: 3px solid black;
}
/* create an aspect ratio of the wrapper */
.iw-so-article-thumb:before {
content: "";
display: block;
padding-top: 100%;
}
.iw-so-article-thumb img {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
margin: auto;
display: block;
min-width: 100%;
min-height: 100%;
object-fit: cover;
/* necessary to fill the frame/rescale the image */
}
This worked using "object-fit: cover" but not in IE/Edge as I found out (there pictures will be "crunched" when cropping should happen on the sides.
Like I said I tried many other solutions I found in forums/blogs but some didn't even work at all.
I suspect the cropping on the sides for wide images fails because the aspect ratio in the image wrapper is defined by the ratio of height to width, so the wrapper will take a responsive width and adapt the height (then crop by "overflow: hidden"). But when the image is wider than the aspect ratio it cannot handle this.
I am not sure if there is a pure CSS solution that works for all browsers including IE/Edge, I suspect there isn't, but I am happy to be taught otherwise.
I have a series of images in a slide show, which have all be uploaded at different image dimensions, I want to essentially make all the images follow a rule whereby they stretch, proportionally to the max width so that if you resize the browser window, they will still keep their fluid resizing response also.
Here is the website template and the images in question.
Would love to be able to do it in CSS if possible.
I'm having trouble stretching small images to fit into a larger container, rather than trying to contain large images in a small container. Usually the smaller image stops resizing once it's hit its actual pixel dims and I want them to continue to stretch proportionally, even if this pixelates them.
The key to solving this is using background images and their CSS properties. Rather than inserting the images as <img> tags you should create containers with a background image set
<div class="slide" style="background-image: url(image1.jpg)"></div>
Give those containers some styling so they fill out your slideshow area.
position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
Then you can use background-size: contain; to make the image sit within the containers using pure CSS. It'll never extend outside of the area, but will fill it as much as possible. Also use background-position: center; and turn off image repeat using background-repeat: no-repeat; - then you'll have a single image centred and as large as it can be.
Full CSS is as follows:
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
You'll be able to use CSS transitions to control how the slideshow moves between slides.
I have an img src that I use as background. Using this css: (image is 1920x1080)
.bg {
position: absolute;
z-index: -1;
width: 100%;
min-width: 1920px;
}
And this does what I want for desktop, upscales accordingly for higher res, and when I shrink the window, it only does some of what I want. The width is still kept (which is good), but I want it to not be scrollable to the sides, and I want the image to be cenered on the new resolution.
So here is an image of how it looks when I resize now, where red area is the current resolution, and the blue area is still scrollable.
http://i.imgur.com/7VJfKPW.jpg
And here is an image of how I want it to look, where the black area is simply empty, the user is not able to scroll to the sides, they can only scroll down if there is content there, and only scroll to the side if there is content there (except for the image itself) and of course the image is as well centered on the new resolution.
http://i.imgur.com/O3sLE31.png
Anyone have any idea of how I can accomplish this? Thanks.'
EDIT: more detailed mockups
So here it is in desktop resolution: http://i.imgur.com/Z8x4e3I.jpg
Here is mobile-ish resolution, where you can see you are able to scroll all the way to the end of the image size to the right: http://i.imgur.com/Y3bC2DI.png
And here is how I want it to be, where the image has been centered, and you are not able to scroll to either side, and all this has to still enable the image to grow in size when the window is bigger than 1920x1080 as well: http://i.imgur.com/7d2vpRK.png
EDIT: tl;dr I want background image to always fit the size of the browser window, even if the user has a 4k monitor, or a 1080p, or a mobile phone, but when we have to shrink the image, the page can't be scrollable to the sides. And the image will usually be 1080p.
the background-size element takes care of that
Just use
background-size: cover;
updated jsfiddle: http://jsfiddle.net/Uz5AY/4/.
* {
margin: 0;
padding: 0;
}
body {
background-image: url(http://placehold.it/1900x1080);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#container > .content {
width: 70%;
margin: 20px auto;
background-color: rgba(255, 255, 255, 0.7);
}
#container > .content > p + p {
margin-top: 20px;
}
Working with a Wordpress theme, and needed to have the blue blur background stay with the slider when the browser window is re-sized. I have achieved that goal, but I have noticed that when you narrow the browser, everything does not stay centered there is a large space on the left. What would be the best way to remedy this?
http://www.stringcreative.ca/wp/
The sites a bit of a mess, you need to have the wrappers with the image, then the containers the same size centered
#wrapper {
background: #000b1a url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat fixed top center;
}
#header_container {
margin: 0 auto;
height: 117px;
width: 960px;
position: relative;
}
dont need a lot of the position's set to absolute, and margins at - to get it to fit.
also look into the 960 Grid System. i use it all the time, and saves me loads of time getting the site to fit. hope this helps
It's because your solution for centered the slider is inelegant, and relies on fixed widths and absolute positioning to make it look right.
To fix it, you need to change a few things.
Change #homebgw to:
#homebgw {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% -117px transparent;
height: 411px;
width: 100%;
}
Change #header to:
#header {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% 0;
height: 100px;
margin: 0 auto;
padding-bottom: 35px;
width: 1400px;
}
Quite simply, you don't need absolute positioning to solve the issues you posted above. If you're using absolute positioning and negative margins to correct center alignment issues, you're probably doing something wrong. Keep it simple, and Google how to achieve the results you desire. The net is full of helpful documentation to achieve these basic results without hacking up your code with fixes ;)
I want to show a photo in my page, the DIV layer is 500 * 500px. I will replace the picture very often, the picture size is not sure, may be horizontal version may be vertical version, maybe 800*600px maybe 576*720px.
I don't want to get the photo deformation. How to set CSS or JS, make the photo show only the center 500 * 500 px, hide the around part.
Use a background image on a DIV with pre-defined dimensions, and set the image position to 50%, which essentially centers it. Whatever overflows the 500x500 will be cropped...
#yourImageDiv {
background: url(../img/image.jpg) no-repeat 50%;
height: 500px;
width: 500px;
}
One nice trick is to use a transparent PNG instead of a div and apply a background-image style to it. That way you get to use the image as you normally would (inline, etc.) but can crop at will.
#cropper {
width: 500px;
height: 500px;
background-image: url(myBackgroundImage.png);
background-repeat: no-repeat;
background-position: center center;
}
...
<img id="cropper" src="clear.png">