You would need to give .portfolio the same height as the images that you are using so that the flow of the page is maintained. Of course this depends on a number of things such as the height of all the images, whether they are the same aspect ratio and whether this is responsive or not.
All of which cannot be answered unless we see a demo of the problem
yeah giving height same as image or little more doesn’t really work because I would this to be responsive. As i shrink browser window it keeps same size and it doesn’t look good.
The trick to make a responsive box that maintains aspect is to create the height with vertical padding with a % value to fix the aspect. The % is based on the width of the box, so the padding creates height relative to the width. You will also need to set overflow to hidden.
Example:-
.box {
width: 95%;
padding-bottom: 75%; /* adjust to aspect ratio */
overflow: hidden;
}
The image height should be auto to maintain aspect ratio.
The other thing is the extra div around the images, I’m not sure it’s needed, but as you have it, it could break the abs positioning of the image because its direct parent does not have rel positioning, the #container does.
Try this css
A couple of things to note that may or may not have a bearing here.
The percentage padding should match the aspect ratio of the image which means that all images are required to have the same aspect ratio (but not necessarily have the same size as they will be made to fit).
The 50% nearly matches the aspect ratio of the image in your demo so as long as your other slider images are the same aspect ratio then you should be fine. If the aspect ratio is different then you will find that either the height of the image is smaller than the padding or the image is bigger than the padding. In the case of the image being bigger than the padding then the overflow:hidden will stop it causing problems but of course the image may be cropped at an inopportune point.
If the image is smaller than the padding then it won’t be much of a problem except that you will show a greater gap below the image to the next section of content.
As I said if your images are the same aspect as the one in your demo then you should be good to go
I was able to get that working but I am confused with centering my image. Only way I was able to center the image inside the div was to give it left and right properties and then margin like this…
If you remove left and right properties I was not able to center it. Would you mind explaining this or maybe point to somewhere where it explains. I found this answer online but doesn’t really tell me why I need to give it zeros to this properties?
Also I am also curious about how to do away with large space on the bottom (between bottom of image and red bordered div) which is created by giving padding-bottom see
here http://dabblet.com/gist/e65c7c1ee0fb8b6882d7871806520d71
This is the standard way of centring fixed width elements ((or replaced elements like images that have intrinsic width and height)) when using absolute positioning. The left 0 and right:0 make would normally make the element as wide as the parent container (the nearest positioned ancestor) but because the element has a width (or intrinsic width in the case of images) the width (or height for top and bottom) dimensions are over-constrained and thus the element cannot be sized via left and right but is instead centred within left and right via auto margins.
It will indeed also center fixed width and height items vertically also using this method if top:0 and bottom:0 are added.
Generally left, right top and bottom would describe the area an absolute element occupies but if that element has a width/height then it cannot be sized to those co-ordinates as it already has a width/height. In these case auto margins will distribute the space around the element evenly thus centring the element both vertically and horizontally.
You have broken the method by not giving the image width:100%. The idea is for the image to fill the space of the container completely. By restricting its width you have wasted the aspect ratio technique as the space will no longer be filled with the image and you will get gaps.
You don’t need the padding method for a single image and then it doesn’t need to be absolutely placed and will thus take up space in the document as required.
In your original you need an absolute image because you had a slider with absolute images and that’s why the padding method was suggested so that you can hold the flow of the document open to match the size of the image.
I explained in my previous posts the mechanics of this method but you must allow the image to fill the full width and height of the padding box otherwise its a pointless exercise.
Which brings us back to this question:
There should be no need to centre the image as such. You may want to centre or resize the parent in some way but the image must always fill the padding box.
Hi Paul
In this example I placed only one image for simplicity however my solution need to have multiple images stacked on top of each other.
In this example http://dabblet.com/gist/e65c7c1ee0fb8b6882d7871806520d71 image is is 1140px 800px so I have given
max-width: 100%;
in hope that max width image will get is 1140 (so no more than that). If I have given
width: 100%;
then image will fill all the space in parent container
You can’t do that as that makes the padding method pointless as I mentioned above. The padding method effectively creates a canvas of correct aspect ratio and you need to size the image to fit the canvas which effectively means height and width of 100%. No other dimension will work.
If you want to contain the image size to 1140px max-width then you do that via a container of the image and not the image itself.
e.g. This is the method you need,
Of course as I have mentioned a number of times now that assumes your images have an aspect ratio that matches the 70% padding.
Ok this works but i hate to move away from this until i understand this. Sorry to be a pest but I still don’t understand how does the bottom padding forces the image to always maintain aspect ratio?
The padding does not force the image to always maintain its aspect ratio. The padding (top or bottom) sets the aspect ratio of the image viewing box. If the image does not have the same aspect ratio as the viewing box, the image will distort.
The padding does two things:
(1) It keeps the slider within the flow of the page (even though the images themselves are removed from the flow).
(2) It sets the aspect ratio at which the images will be displayed, even if it distorts them. Therefore, it is vital that the images have the same aspect ratio as the image box.
How does it work:
Vertical padding expressed in percent is relative to the width of the parent container. A wrapper container has a max-width. The padded container has a width of 100% (probably not expressed) and is snugly inside the parent wrapper container with its limited width. Padding top of, say, 70% will set a height that is 70% of the width of the wrapper container which should be the same as the width of the padded container. The images are absolutely positioned to fit the padded box.
Like any image or photograph, if enlarged to dimensions greater than it’s native dimensions, the image will become blurry; but whether that is a problem or not depends on the image and the context, A photo of a scene such as vague people in a crowd, that was intentionally taken slightly out of focus could easily be enlarged to a size greater than native and one would never know.
So, in general, for precise, clear images, one would want to scale them smaller rather than larger so they remain sharp. Some images can tolerate a little blurriness without a problem whereas others, like an engineering drawing, usually could not.
To avoid that, set a max-width. Not on the image, but the image container.
It doesn’t, the height: auto on the image maintains the image aspect.
The padding-bottom maintains the image container aspect.
Because the image is absolute it is out of the flow, which means the container will act as if empty and have no height, that’s why you need the padding to give it height. using padding rather than actual height, allows you to use a % value based on the width, therefore creating the aspect ratio.
