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.
Related
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>
I am using yahoo's pure.css layout and I am having some small issues. I have a logo which would replace the heading and i want the logo to be fluid as well(The size changes with the bsize of the browser window).
I am currently using the following:
h1.logo{
background-image: url('../images/LogoColor287x86.png');
background-size: 100%;
text-align: center;
background-repeat: no-repeat;
width: 100%;
float: none;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
This works but the result is not what i want. The above piece of CSS ensures that the logo occupies the maximum size available to it. But I want to to have a maximum size and centered. Say it should be a maximum size of 500px width even though the amount of space(width) available to it is 1000px.
Anyway to constrain the proportions.
For making the logo center use the property background-position: center center.
Also see jsfiddle: https://jsfiddle.net/Saiyam/7fzfoy43/2/
If I understand your problem correctly, you would like a background image to have a maximum size while remaining centered and scaling correctly when less space is available?
I accomplished this with nested elements - one positioned relative and taking the maximum space available to it. The nested element positioned absolute with the maximum values defined and then taking advantage of
background-size: contain;
See JS fiddle here: http://jsfiddle.net/4bgcokux/2/
put your logo inside a div with css text-align: -webkit-center;
HTML:
<div class="header">
<h1 class="logo"></h1>
</div>
CSS:
.logo {
background-image: url('https://images.google.com/intl/en_ALL/images/srpr/logo11w.png');
background-size:contain;
padding-top: 29.8%;
max-width: 50%;
background-repeat: no-repeat;
}
.header {
text-align: -webkit-center;
width:100%;
}
Hope it helps you...
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/
Hello I am currently writing a sprite generator based on CSS 3 and my question is : What is the best practice to show CSS3 background-images with a bundled sprite image based on images with different original Image Size concatenated vertical?
I have tried this here at jsfiddle,
.gui-background-brand-nodejs-64, .gui-background-brand-grayscale-nodejs-32{
background-image: url("http://www.shareimages.com/images/pics/0/0/3/65385-rJWWm5Wfk6ainac-sprite.png");
background-repeat: no-repeat;
display: inline-block;
background-size: 100%;
}
.gui-background-brand-nodejs-64{
width: 238px;
height: 64px;
background-position:0 0px;
}
.gui-background-brand-grayscale-nodejs-32{
width: 119px;
height: 32px;
background-position:0 -32px;
}
but this technique does only work if all images have the same image size. So in example the second image should have 32px height.
I have worked out compromise solutions at jsfiddle
1. via extra HTML markup,
but I think it is ugly and I m wondering if there is not a full CSS integration possbile to make css background-image realy usable.
2. via calculation
.gui-background-brand-grayscale-nodejs-32 {
width: 119px;
height: 32px;
background-size: 238px;
background-position: 0 -64px;
}
currently I calculating factors
X = (longest image width / current image width)
Y = sum(previous original image HEIGHTs)
background-size: {current image WIDTH*X}px;
background-position: 0 -{Y}px;
I wish the css could be defined with the width and height values of the original images because factor X can result in a decimal value. Not easy!
Ok . So far nobody answered so i decided to choose answer 2. Via calculation!
I ve created an Image processing service for web development which handles all the stuff automaticaly at https://github.com/s-a/scream-js if somebody is interested.
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">