![]() ![]() '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.Īs for positioning the image inside the div, I recently found the use of this excerpt very useful: margin: 0 'Inherit's were used to always fill the parent object and 'cover' on 'object-fit' to not lose proportion. The parent object was a circle with a 'vmin' responsive size, therefore the 'vmin' 'max-height'. This was my solution: min-width: inherit I had a similar situation in which the solution needed to be inclusive to both portrait and landscape pictures. (I suggest resize the "result" box to exactly see how it messes up) Thanks for reading, hope I made myself clear, English not being my primary language.ĮDIT: Here's a fiddle showing how the and the css are. If you'd like me to make a fiddle, just ask and you shall be given. 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. Since I'm learning css, I think it might be better for me to try and fix this problem using only css. Someone had the same sort of problem, but he uses jquery to fix it. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure) 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. It's kind of an archaic technique I'd rather not resort to. 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.Ī simple way to solve this would be to manually crop portrait images to fit landscape style. 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.įor my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images. I've been making a responsive image thumbnail gallery for a portfolio using this " Tutorial".
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |