I have drafted up a brief example of what I have so far, and what I'm trying to achieve.
See my demo here
In my jsfiddle you will see a wrapping div named "content-wrap". Within this div I want an image that can stretch to window size and content.
I have done background image stretching before: See example here
But this is a bit more complicated because it is for a specific region within the site.
I have tried having a play so far with my existing code from the link above and I think I may need to take a different approach. As when you scroll down the images doesn't stay in position it moves with the scroll bar (as it should).
Any ideas?
If you don't mind using CSS3's background-size property, then the following additions to your #content-wrap { CSS statements will achieve a responsive background image that will expand to fit the size of the container.
#content-wrap {
height: 1000px;
background: #ccc;
color: #fff;
/* Added CSS */
display: block;
max-width: 100%;
clear: both;
background: transparent url("http://placekitten.com/900/900") top right no-repeat;
background-size: cover;
}
Here is an updated version of your jsfiddle with my added CSS and some lovely placekittens:
http://jsfiddle.net/kztGj/22/
The downsides to this are of course that it will not work in Internet Explorer < 9, Firefox 3.6, or any browser that doesn't support CSS3. But then your asking for a responsive image, and as such you'll be hard pushed to find an elegant solution that supports older browsers.
For more information on the background-size property and its uses, I recommend checking out this article, its quite informative.
In your image, add a css like this
.custom-image {
width:100%;
}
and your html
<div>
<img src="" class="custom-image" />
</div>
Related
I've been making a responsive image thumbnail gallery for a portfolio using this "Tutorial".
This tutorial is quite complete and pedagogic (I'm a big noob), but doesn't cover one part: The tutorial maker uses images that are all in landscape style.
For my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images.
Using both kinds of orientation gives a sort of an unordered look and feel to the divs, which isn't what I'm going for.
A simple way to solve this would be to manually crop portrait images to fit landscape style. It's kind of an archaic technique I'd rather not resort to.
I realize that another way to do this would be, not to use the img tags, but rather using background-image and background-contain on divs fit to the image box. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure)
Someone had the same sort of problem, but he uses jquery to fix it. Since I'm learning css, I think it might be better for me to try and fix this problem using only css.
"Link"
My major constraint is that I want the page to stay responsive, as well as have my images keep their aspect ratio, so a width:100% and height:100% is out.
If you'd like me to make a fiddle, just ask and you shall be given.
Thanks for reading, hope I made myself clear, English not being my primary language.
EDIT: Here's a fiddle showing how the <img> <div> and the css are. http://jsfiddle.net/R8B27/ (I suggest resize the "result" box to exactly see how it messes up)
L.
The main issue here is the vertical alignment of images that are cropped (in your case portrait orientated images).
If you can go with default alignment of these images, this means only the top of the image is shown, you can use this technique :
FIDDLE
The CSS I added/modified from your example :
.galleryItem a{
display:block;
position:relative;
padding-bottom:50%;
overflow:hidden;
border-radius: 5px;
}
.galleryItem a img {
position:absolute;
width: 100%;
height:auto;
display:block;
}
I had a similar situation in which the solution needed to be inclusive to both portrait and landscape pictures. This was my solution:
min-width: inherit;
min-height: inherit;
max-height: 63vmin;
object-fit: cover;
The parent object was a circle with a 'vmin' responsive size, therefore the 'vmin' 'max-height'. 'Inherit's were used to always fill the parent object and 'cover' on 'object-fit' to not lose proportion. 'Max-height' was used as the control factor due to the rarity of portrait pictures exceeding a 1:2 ratio; meaning to control the excess of width cutoff through a height variable.
As for positioning the image inside the div, I recently found the use of this excerpt very useful:
margin: 0;
padding: 0;
-webkit-transform: translate(-50%, 0%);
position: absolute;
left: 50%;
top: 0%;
With 'margin' and 'padding' at '0', you're cutting off excess weight on the pic. '-webkit-transform: translate' will allow you to change the item's origin or pick point. Setting this to '-50%, 0%' will set the origin to the center-top of the pic (this should always have negative values for the origin to be inside the item). 'left: 50%; top: 0%;' will set the placement of the origin of the item to be at center-top of the container.
In all latest browsers(supposing your not using IE anymore) you can use "object-fit" for this purpose. just add this css:
.center-cropped {
object-fit: cover;
object-position: center;
height: 200px;
width: 270px;
}
...
And in html, you can use this class directly in the img tag:
<div>
<img class="center-cropped" src="~/Images/yourImage.jpg" />
</div>
This will show only a "centered" version of your image, for both portrait and landscape images
Here is an example of how I am currently implementing this functionality:
EXAMPLE
The content div can change in height dynamically when items are added or removed so I need the gradient to move with it. This works great in desktop browsers... However when you view it on an iPad and scroll down (moving the entire body up) it looks strange because of the position:fixed on the gradient div. Note that this is only a problem when the content div is smaller than the viewport. If the content div is larger than the viewport it pushes the gradient out of view and works great.
Is there any way to prevent the iPad from moving the body around like that or is there a better way to implement this functionality without using position: fixed?
Thanks!
Can you explain a bit more what looks wrong on the iPad, I don't have one with me. Also, I removed the position: fixed; and the functionality didn't change on chrome. position static and relative work the same for me.
I abandoned the gradient div and instead set a min-height on the content div with a background image of the gradient with the following properties:
#content {
min-height: 200px;
background-color: white;
background-image: url(../Images/content-background.png);
background-position: center bottom;
background-repeat: repeat-x;
}
So I'm looking to add a footer to my page but I want it to be a background-image that is automatically resized depending on the monitor resolution and have it with a 100% width and height but to never overflow to the sides, so I don't want scrollbars to appear. The image is .jpg.
Would appreciate some input as to what is the best way to go around this
Use the following CSS
div {
width: 100%;
height: 400px;
background-image: url(your-path-here.jpg);
background-size: 100% 100%;
}
And see this live example
Be careful, if you don't resize the height of your footer as well, that will stretch the image.
background-size will do the trick, but note that it' not supported by IE8 and older. Just to be on the safe side for these browsers, the image could be positioned in the center (that means at 50% horizontally and 50% vertically - of course, the center keyword also works)
Live demo: http://dabblet.com/gist/2790711
I was wondering if it's possible to change what file the background image repeats to when the old image runs out.
So, if image01.jpg is set as the first background-image, when it runs out vertically image02.jpq would be added as the background image to complete the page?
It might be a straight 'No', thts fine im just wondering
With CSS3 you can have multiple backgrounds. You can specify a background-repeat for each of them. It is supported by all major browsers, except IE8 and before.
http://www.css3.info/preview/multiple-backgrounds/
There's always a solution for something in CSS if you're willing to add more markup to your file. Your best bet is to wrap the element you have the first image in with a containing div with the background you would like to appear if the first image runs out. Like so:
HTML:
<div class="container"><span class="image"></span></div>
CSS:
.container {
background: transparent url(image02.jpg) 100% 0 no-repeat /* Appears on the right */
width: 200px; /* The maximum width */
/* Can also add x pixels padding to ensure that x pixels of image02 are shown */
}
.image {
background: transparent url(image01.jpg) 0 0 no-repeat; /* Appears on the left */
}
Of course you can always replace the <span> with an actual image as well.
Don't forget that HTML is an element, too.
html {/*insert tiling background image*/}
body {/*insert normal background image*/}
The body background will sit on top of the tiling html background. Works in every browser and won't require additional markup.
I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js