Repository navigation
[Image] Add a resizeMode named 'fit' #2296
Description
The new resizeMode would work similar to cover, but if the raw image dimensions are ever larger than both the Image width and height, it shrinks the image to fit at least one edge to the expected dimensions.
# The width/height of the raw image.
[ 1000, 1000 ]
# The width/height of the Image component.
[ 320, 200 ]
# If the resizeMode is set to 'cover', the large raw image is kept as is.
# This results in an unacceptable amount of information getting cropped off.
[ 1000, 1000 ]
# If the resizeMode is set to 'fit', the large raw image is scaled
# down to fit as much content as possible without leaving whitespace.
[ 320, 320 ]
Activity
ide commentedon Aug 11, 2015
"cover" should probably do what you're saying, and needs to support scaling down. This probably isn't very hard to add if someone wants to submit a PR.
cc @nicklockwood @a2.
nicklockwood commentedon Aug 11, 2015
Yeah, this looks like it's just a bug in the resizing logic. I'll take a look at fixing it.
cyprusglobe commentedon Aug 11, 2015
👍
janmonschke commentedon Aug 27, 2015
👍
christopherdro commentedon Sep 13, 2015
@aleclarson Maybe I'm missing something but shouldn't setting resizeMode to
containdo what your asking?See: https://rnplay.org/apps/Vw3tCA
satya164 commentedon Jan 19, 2016
Related #4031
nicklockwood commentedon Jan 19, 2016
I don't know specifically if/when this was fixed, but nobody else has reported it on iOS, so I assume
coveris working correctly. Issue #4031 relates to Android, which I suspect is unrelated to this issue since it predates the Android release :-)satya164 commentedon Jan 19, 2016
@nicklockwood Yeah, just commented because the Android issue can refer to this one. Should have done the other way around :D
aleclarson commentedon Jul 13, 2016
We could use a
resizeModethat:This would help with centering an icon within a button.
Another solution would be a
resizeModethat uses the image dimensions and centers the image within the frame (that is, no resizing ever occurs). It looks likeUIViewContentModeCenterwould work on iOS, not sure about Android.The current workaround is to:
style.widthandstyle.heightof theImageto the exact size of the.pngImagein aViewthat centers its children usingjustifyContentandalignItemsThe workaround has a couple caveats:
ImageandView(instead of just anImage)widthandheightexplicitly (which means knowing the image size)aleclarson commentedon Jul 14, 2016
Oh, just realized that fb8340d is already in master! I'm using 0.22.2 at the moment. 👍
aleclarson commentedon Jul 14, 2016
Oh, it looks like that only provides Android support. I guess I'll make a pull request that adds iOS support.
Add Image resizeMode center to iOS