i have site uses percentage widths create columns of images. have desire have images have maximum height equal maximum width. say, if image container has width of 33.33%, , comes 125px, want maximum height of image same, long edge of images same length, regardless of aspect ratio or orientation.
i have seen various examples of maintaining block's aspect ratio through use of padding , absolutely positioned element within:
.wrapper { width: 100%; display: inline-block; position: relative; } .wrapper:after { padding-top: 100%; display: block; content: ''; } .main { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } however, creates box fixed ratio not behave in "min/max" manner.
an example of kind of list have, different aspect-ratio images can found here: http://jsfiddle.net/sxk4bh6f/1/
ideally, not use javascript.
clarification: if list-containing element 1000px, , list item's have width of 33.33%, 333.3px wide. inside list item image container, disregarding padding/margins (let's not talk @ time) have width of 100% or 333.3px. image within has css makes maintain aspect ratio, max-width:100%, making maximum width of image 333.3px. easy. however, portrait image, while having maximum-width of 333.3px, may grow height of more that.
our goal have maximum height of image same maximum width of image, without explicitly setting (allow list container size above , below 1000px, in turn makes list item's width change, in turn make maximum-height of images within change).
one last clarification:
you have 2 images in list. list container 500px wide, , list items set 50% width. means list items allotted 250px width. if both images 2:1 aspect ration, 1 portrait , 1 landscape, portrait image should maintain aspect ratio without clipping, , not exceed allotted width: 250px. such height of individual image never exceed allotted width of it's container.
if list container expands 1000px, each list item allotted 500px. such, landscape image expand 500px wide, , portrait image expand 500px tall.
we aiming accomplish in css only, no javascript.
updated link: had wrong example link before. have updated above. link below link example of maintaining aspect ration divs trying use make happen. not working.
progress:
by adding wrapper around image (eh, not sure modifying html) able accomplish most of desired.
http://jsfiddle.net/4crswgxx/3/
however, if image not have width/height resolution, not fill top/bottom edge (ie: if 1 image landscape 100px wide, , landscape 200px wide, , list item width 150px, 200px extend sides, 200px not). can mitigated setting width: 100%, if flip , talking height, have same height, @ point, image distorted , in square.
Comments
Post a Comment