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">
Related
I have a background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;
I am having some difficulty adjusting a background image for a website I am writing. I want to use a large picture to cover the background of the site. I am using the css property cover and it looks fine when the page loads.
My problem is when a button is clicked, it appends 10 images to an empty div. When these images are appending, that div is growing very large and changing the page size, which causes the image to reload to adapt to this siginificantly increased page size. This leads to the image looking very distorted.
Is there any way to keep the image the same size as it was when the page loads, and have a simple background color under the image that will cover the rest of the page when the images are appended?
I am using background-size: cover and background-repeat: no-repeat
Thanks for your time.
Not 100% I get you, but you could try having two divs.
One div would contain your background image and be set to height: 100vh; and width: 100vw;. This will ensure the image will always stay the same size as the viewport and thus won't change size when things are added.
Under this div, you could have another, with a simple colour property set.
I.e.,
.bg-image {
width: 100vw;
height: 100vh;
background-image: url(someurl);
background-size: cover;
background-repeat: none;
}
.bg {
background-color: grey;
height: 100%;
width: 100%;
}
<div class="bg">
<div class="bg-image">
<!-- Place where the images go -->
</div>
</div>
My background image doesn't want to scale with the rest of the page. And when I've gotten it to do so, it created a huge white-space gap underneath it when I'm scaling down the page.
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
use background-size:cover for the background-image to cover the whole div.
see here more about this property : CSS3 background-size Property
.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-size:cover;
}
<div class="vintage">
</div>
Try adding the property value cover to your css file.
Like this:
div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}
This enables you to scale the background image to be as large as possible so that the background area is completely covered by the background image.
If some parts of the background image are not visible within the background positioning area, try giving some extra information to your css such as:
width: 100vw;
height: 100vh;
(Note that CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.)
If you don't want the background image to repeat simply add:
background-repeat:no-repeat;
For more info, check " https://css-tricks.com/perfect-full-page-background-image/ " it will give you a good idea of different approaches to be considered when trying to work with a full screen background.
Hope this helps and good luck! :)
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/
The white part is a container div centered horizontally on the website. The stripes are the background image of the body element. I have the rest of the dumbbell as a picture and I want to place it outside of the container so that there's a complete picture.
Usually it would be positioning the image absolutely in the container div and moving it a bit to the right.
But my problem is that the background of the whole image is white. So the result is:
Is there a way to solve this?
<body>
<div id="container">
<div id="pimg"><img src="../images/image_part.png"></div>
</div>
</body>
html {
background-image: url('../images/stripes.png');
}
#container {
position: relative;
background-color: white;
background-image: url('../images/image.png'); // first picture
background-repeat: no-repeat;
background-position: top right;
width: 800px;
height: 90%;
margin: 0 auto;
}
#pimg {
position: absolute;
top: 0;
right: -100px; // second image
}
You can set the following css to hide the part of the image that goes outsite the div#container
#container
{
overflow:hidden;
}
The above approach will crop the image, and if you don't want to do that you could set this so that the image has maximum width the one of it's container
#pimg
{ width:800px; }
#pimg img
{ max-width:100%; }
The main problem is that your PNG has a white background instead a transparent background like you want so:
Edit "image.png" in an image editor software like Adobe Photoshop or GIMP
Open it in the image editor
Erease the background (because you have a PNG, yes, but it has a white background)
Save the image in PNG or GIF format, because JPEG doesn't support transparent backgrounds
Tip: Photoshop have an option to save a picture for the web, Control(Command in Mac) + Shift + alt + S, this option can help you to optimize the image adjusting its params
Here's a Photoshop tutorial: http://www.youtube.com/watch?v=PLA2FaOXkkg