Add logic for manually specifying the initial crop rect. #18
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cathyxz
approved these changes
Apr 26, 2019
sparhami
pushed a commit
to sparhami/animations
that referenced
this pull request
May 24, 2019
This allows developers to specify the cropping rect rather than using the bounds of the `<img>` element. So now you can do something like: ```html <div style="overflow: hidden"> <img src="..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(2);"> </div> ``` In this example, you will have something that renders like: ``` ________________ | ____ | | | | | | | | | | ‾‾‾‾ | ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ ``` where the inner rectangle represents the cropping div, and the outer rectangle represents the `<img>` boundaries. With this, you can zoom in on a portion of an image in a way that `object-position` does not allow you to. As an alternative, you could use `object-fit: none`, `object-position`, and `transform: scale`, but this does not work well when trying to responsively size images (e.g. using the `padding-bottom` trick). Without this change, the animation is off as the image portion escaping the overflow container is visible at the start/end on the first frame of the animation (instead of the crop growing),
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This allows developers to specify the cropping rect rather than using the bounds of the
<img>element. So now you can do something like:In this example, you will have something that renders like:
where the inner rectangle represents the cropping div, and the outer rectangle represents the
<img>boundaries. With this, you can zoom in on a portion of an image in a way thatobject-positiondoes not allow you to. As an alternative, you could useobject-fit: none,object-position, andtransform: scale, but this does not work well when trying to responsively size images (e.g. using thepadding-bottomtrick).Without this change, the animation is off as the image portion escaping the overflow container is visible at the start/end on the first frame of the animation (instead of the crop growing),
A live demo of what this looks like: https://sparhami.github.io/animations/docs/demo/zoom-crop/