responsively scale and crop image inside absolute positioned div - html

Question

I have an SVG in a row in a container-fluid which has position: absolute because I need it to be in the background/have divs with titles and text in front of it. I'm planning to animate the SVG interactively with user's scrolling, so that's why I have it as an inline SVG and haven't set it as background-image. So with this in mind I think having absolute position is necessary. Its parent is set to relative.
I have a part of the image (a cat, if you look at the image) that needs to be in focus when user is at the top of the page no matter the screen size. Right now the image crops [ed: the image doesn't technically crop, but since the top doesn't crop the bottom disappears out of view] from the bottom when screen size enlarges so the cat disappears.
.illustrationrow {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: -1;
}
<div class="container-fluid" style="height: 600px; position: relative;">
<div class="illustrationrow row">
<svg id="illustration" viewBox="510 370 460 1114" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<ellipse id="sky" cx="591.71" cy="677.514" rx="553.629" ry="533.026" fill="#fe766a"
transform="matrix(1.16788 0 0 1.2058 -44.468 -46.304)" />
<g id="sun">
<ellipse id="sunbody" cx="591.71" cy="677.514" rx="553.629" ry="533.026" fill="#fe5862"
transform="matrix(.257 0 0 .26633 586.008 485.069)" />
<path id="sunrays"
d="M778.348 11.262c-144.198.297-276.5 97.725-315.762 244.84-46.83 175.47 56.323 355.604 230.207 402.01l-.912-.527c-14.053-8.184-27.511-17.36-40.201-27.533a321.898 321.898 0 01-54.712-56.103c-24.302-31.922-42.543-68.354-53.708-106.881a330.807 330.807 0 01-12.647-108.279 329.248 329.248 0 0116.204-86.857c14.173-42.879 37.187-82.833 67.169-116.607a329.306 329.306 0 0171.193-60.267 330.786 330.786 0 0198.684-41.412c36.12-8.632 73.682-11.11 110.614-7.157a321.952 321.952 0 0179.994 19.135c16.17 6.144 31.81 13.61 46.81 22.218l69.039 52.861c12.58 7.257 24.69 15.325 36.19 24.197 10.97 8.457 21.36 17.627 31.18 27.393l-68.23-52.077a326.102 326.102 0 00-26.05-13.329 323.585 323.585 0 00-51.851-18.459c-46.115-12.116-94.784-13.962-141.707-5.538-35.925 6.45-70.733 18.894-102.585 36.72-33.448 18.716-63.53 43.314-88.663 72.242-23.886 27.492-43.187 58.902-56.84 92.668-15.451 38.22-23.624 79.308-24.016 120.53-.4 42.063 7.312 84.151 22.784 123.276a321.892 321.892 0 0038.606 70.388c9.942 13.725 20.974 26.626 32.91 38.653l.219-.167c-8.078-14.114-15.145-28.79-21.048-43.945a321.888 321.888 0 01-19.331-75.943c-5.085-39.796-2.666-80.467 6.928-119.415a330.777 330.777 0 0143.187-100.096 329.236 329.236 0 0157.462-67.118c33.714-30.049 73.622-53.143 116.473-67.4a329.321 329.321 0 0191.789-16.597 330.828 330.828 0 01106.173 13.478c35.59 10.585 69.36 27.22 99.37 49.11a322.17 322.17 0 0159.71 56.568c10.93 13.406 20.74 27.69 29.43 42.646l33.73 80.946c7.1 12.351 13.41 25.143 18.83 38.32 5.29 12.832 9.72 25.999 13.34 39.393l-32.68-78.585c-7.39-12.679-15.61-24.863-24.65-36.43-16.22-20.753-34.99-39.5-55.72-55.74a330.266 330.266 0 00-133.59-62.667 329.523 329.523 0 00-103.41-5.695c-38.451 3.974-76.222 14.687-111.021 31.524a329.319 329.319 0 00-78.206 52.895 330.802 330.802 0 00-68.762 88.293c-17.995 33.624-30.094 70.365-35.45 108.129a321.884 321.884 0 00-1.367 79.312c1.764 16.51 4.83 32.858 9.067 48.912l.272 1.018.002-1.054c.078-16.262 1.31-32.504 3.793-48.577a321.804 321.804 0 0121.306-75.413c15.53-36.991 37.995-70.982 65.806-99.888a330.808 330.808 0 0187.514-65.004 329.204 329.204 0 0183.352-29.312c44.23-9.122 90.334-9.122 134.574 0a329.21 329.21 0 0187.75 31.61 330.592 330.592 0 0185.14 64.84c25.51 26.99 46.41 58.302 61.42 92.277a321.671 321.671 0 0123.34 78.869c2.75 17.078 4.09 34.356 4.12 51.652l-11.35 86.955a326.324 326.324 0 01-2.89 42.6c-1.85 13.754-4.62 27.368-8.19 40.777l11.08-84.385c-.05-14.68-1.06-29.341-3.1-43.88-3.64-26.087-10.49-51.712-20.31-76.154a329.482 329.482 0 00-35.99-66.387 330.121 330.121 0 00-48.24-54.761 329.502 329.502 0 00-86.65-56.723c-35.27-15.82-73.33-25.465-111.88-28.322a329.31 329.31 0 00-94.186 6.612 330.768 330.768 0 00-103.737 41.98c-32.417 20.089-61.292 45.829-84.842 75.833a321.901 321.901 0 00-40.907 67.96c-6.743 15.176-12.276 30.86-16.65 46.877l-.275 1.018.529-.912c8.198-14.044 17.387-27.493 27.573-40.173a321.86 321.86 0 0156.158-54.656c31.946-24.27 68.396-42.475 106.934-53.602a330.788 330.788 0 01108.29-12.539 329.309 329.309 0 0186.843 16.291c42.86 14.215 82.8 37.269 116.54 67.285a329.635 329.635 0 0160.2 71.253c19.01 30.38 33.01 63.858 41.31 98.724 8.59 36.13 11.04 73.694 7.05 110.622A322.34 322.34 0 011285 940.38c-6.16 16.165-13.64 31.796-22.26 46.789l-53.31 69.632c-7.16 12.32-15.09 24.17-23.8 35.45-8.48 10.98-17.68 21.39-27.48 31.22l51.79-67.54c7.29-12.742 13.75-25.946 19.26-39.552a325.749 325.749 0 0020.48-76.107 329.841 329.841 0 002.03-75.49 330.645 330.645 0 00-14.4-71.545c-10.56-33.031-26.38-64.338-46.68-92.45-22.64-31.335-50.77-58.717-82.73-80.466a329.445 329.445 0 00-84.875-41.366 330.813 330.813 0 00-110.83-15.513c-38.117 1.19-75.993 9.044-111.39 23.253a321.869 321.869 0 00-69.408 38.402c-13.426 9.77-26.061 20.587-37.857 32.27l-.747.745.914-.526c14.122-8.063 28.805-15.116 43.965-21.004a321.869 321.869 0 0175.963-19.254c39.8-5.046 80.47-2.587 119.408 7.046a330.875 330.875 0 01100.057 43.287 329.491 329.491 0 0167.06 57.528c30.01 33.744 53.07 73.675 67.28 116.54a329.376 329.376 0 0116.51 91.806 330.908 330.908 0 01-13.59 106.154c-10.62 35.582-27.29 69.342-49.2 99.322a322.429 322.429 0 01-56.63 59.66c-13.42 10.91-27.71 20.71-42.68 29.38l-80.98 33.65c-12.357 7.09-25.155 13.39-38.336 18.8-12.84 5.27-26.01 9.69-39.408 13.3l78.618-32.6c12.686-7.38 24.878-15.59 36.454-24.62 20.77-16.2 39.535-34.95 55.792-55.67a329.862 329.862 0 0039.5-64.36 330.27 330.27 0 0023.3-69.16 329.537 329.537 0 005.8-103.403c-3.93-38.456-14.61-76.238-31.41-111.053a329.28 329.28 0 00-52.82-78.26 330.78 330.78 0 00-88.223-68.848c-33.606-18.03-70.335-30.165-108.094-35.558a321.876 321.876 0 00-79.31-1.447c-16.513 1.748-32.863 4.799-48.921 9.019l-1.02.27c179.97-.178 326.23 147.122 326.412 328.733.18 181.607-145.785 329.197-325.755 329.377l-86.211-11.26c144.198-.3 276.5-97.72 315.762-244.84 46.83-175.467-56.323-355.602-230.207-402.01l.916.53c14.994 8.734 29.31 18.599 42.739 29.59a321.973 321.973 0 0156.627 60.043c21.697 29.912 38.186 63.532 48.687 98.957a330.798 330.798 0 0113.36 106.842 329.278 329.278 0 01-16.435 90.465c-14.286 43.113-37.511 83.253-67.767 117.123a329.03 329.03 0 01-67.158 57.37 330.908 330.908 0 01-100.13 43.09c-38.96 9.55-79.638 11.93-119.433 6.8a321.844 321.844 0 01-75.95-19.43c-15.156-5.92-29.832-13.01-43.945-21.11l-69.03-52.86c-24.11-13.85-46.79-31.04-67.374-51.59l67.375 51.59c125.028 71.84 288.318 53.62 395.877-54.15 128.29-128.55 129.026-336.128 1.64-463.26l.528.914c8.077 14.114 15.145 28.79 21.048 43.945a321.934 321.934 0 0119.33 75.943c5.085 39.796 2.666 80.467-6.928 119.415a330.777 330.777 0 01-43.187 100.096 329.2 329.2 0 01-57.461 67.117c-33.714 30.05-73.622 53.14-116.474 67.4a329.326 329.326 0 01-91.79 16.6c-35.815 1.31-71.814-3.27-106.167-13.48-35.597-10.59-69.366-27.22-99.373-49.11a321.852 321.852 0 01-59.71-56.568c-10.932-13.406-20.744-27.69-29.43-42.646l-33.352-80.292c-13.953-24.052-24.997-50.283-32.552-78.367l32.552 78.367c72.357 124.73 222.882 190.596 369.918 151.036 175.376-47.177 279.802-226.577 233.049-400.37l-.002 1.055c-.078 16.262-1.311 32.504-3.792 48.577a321.9 321.9 0 01-21.306 75.413c-15.531 36.99-37.996 70.982-65.807 99.888a330.808 330.808 0 01-87.514 65.004 329.183 329.183 0 01-83.351 29.312c-44.231 9.122-90.34 9.122-134.57 0a329.275 329.275 0 01-87.758-31.61 330.784 330.784 0 01-85.141-64.84c-25.51-26.99-46.404-58.302-61.413-92.277a321.948 321.948 0 01-23.347-78.87c-2.748-17.077-4.085-34.355-4.113-51.651l11.348-86.2c-.03-27.806 3.549-56.04 11.077-84.132l-11.077 84.133c.155 144.198 97.45 276.597 244.525 316.005 175.423 47.005 355.66-55.968 402.24-229.806l-.527.912c-8.2 14.044-17.388 27.493-27.574 40.173a321.86 321.86 0 01-56.158 54.656c-31.945 24.27-68.395 42.475-106.934 53.602a330.788 330.788 0 01-108.291 12.539 329.263 329.263 0 01-86.841-16.291c-42.865-14.215-82.796-37.27-116.54-67.285a329.251 329.251 0 01-60.196-71.253 330.77 330.77 0 01-41.314-98.724c-8.596-36.13-11.036-73.694-7.047-110.622a321.977 321.977 0 0119.215-79.975c6.16-16.165 13.64-31.796 22.265-46.789l52.927-68.977c13.877-24.096 31.094-46.758 51.659-67.323l-51.66 67.323c-71.965 124.957-53.903 288.265 53.763 395.93 128.419 128.42 335.996 129.362 463.254 2.104l-.914.526c-14.122 8.063-28.804 15.116-43.965 21.004a321.857 321.857 0 01-75.963 19.254c-39.8 5.046-80.47 2.587-119.408-7.046a330.805 330.805 0 01-100.052-43.287 329.202 329.202 0 01-67.061-57.528c-30.015-33.744-53.07-73.675-67.285-116.541a329.298 329.298 0 01-16.505-91.805 330.82 330.82 0 0113.583-106.155c10.62-35.587 27.29-69.338 49.208-99.324a321.96 321.96 0 0156.629-59.653c13.417-10.919 27.71-20.717 42.676-29.389L444.06 54.9c24.066-13.93 50.307-24.948 78.4-32.475l-78.4 32.474C319.258 127.131 253.246 277.59 292.655 424.665c47.004 175.423 226.3 280.028 400.138 233.448-179.97.179-326.23-147.121-326.411-328.732C366.2 147.77 512.167.178 692.138 0l86.21 11.263zm-171.11 1293.7c-27.806.06-56.044-3.49-84.144-10.99l84.144 10.99zm171.11-1293.7c27.806-.058 56.045 3.493 84.144 10.992l-84.144-10.992z"
fill="#fe5862" />
</g>
<g class="">
<path id="chair"
d="M625.903 671.925c7.123.082 12.974-5.617 13.056-12.719.059-5.052-2.82-9.465-7.05-11.62-5.092-2.672-9.443-6.664-12.642-11.545a20.401 20.401 0 01-3.348-11.254 5.088 5.088 0 015.116-5.007 3.142 3.142 0 013.112 3.167c0 .045-.022.412-.042.821-.015.318-.018.65-.018.968 0 5.961 2.593 11.61 7.077 15.5a33.498 33.498 0 0020.7 7.157l3.513.001a1.94 1.94 0 011.934 1.944 1.94 1.94 0 01-1.934 1.943l-2.606.005c-4.243 0-7.69 3.438-7.69 7.67.082 7.101 5.933 12.831 13.057 12.748l-32.235.22z"
fill="#461a3e" />
<path class="cat"
d="M669.004 622.803a3.142 3.142 0 013.238-3.04 5.089 5.089 0 014.91 5.208c-.437 11.278-9.936 20.107-21.246 19.723-.842-.029-5.915-.204-6-.205-6.532-.132-12.362-3.333-16.049-8.217-2.508-3.32-4.172-7.425-4.123-11.893.107-9.735 6.275-17.656 15.7-20.369 2.07-.596 3.803-2.632 3.756-4.898-.178-2.93.759-6.095 2.753-8.288.908-.998 1.143-1.033 2.266-1.747.17-.109.423-1.13 1.014-2.13.668-1.126 1.676-2.234 1.78-2.148.017.014.272.571.546 1.769.25 1.088.085 1.622.373 1.626 1.688.021 3.187.27 4.562 1.327.455.349.859.76 1.217 1.205.64.796 1.105 1.689 2.3 1.611.54-.01 1.002.412 1.013.943a.952.952 0 01-.196.6c.346.346.571.816.582 1.342.008.358-.08.695-.242.987.087 1.27-.668 2.487-1.86 2.948a3 3 0 00-1.698 1.682c-.108.33-.217.661-.283 1.002-.19.979.034 2.066.472 2.947.11.236.215.475.314.716.633 1.497.99 3.138 1.008 4.862a12.783 12.783 0 01-2.523 7.77 20.415 20.415 0 00-3.977 12.58c.024 1.081.11 2.526.27 3.961.006.049.003.082.043.278.04.2.014.102.052.225.305.978 1.384 2.188 2.923 2.206.429.005 1.203-.27 1.555-.519.402-.283.858-.791 1.115-1.115a20.509 20.509 0 004.435-12.95"
fill="#461a3e" />
<g class="wholehat" transform="matrix(.93278 -.65762 .58245 .82616 -110.726 596.727)">
<path class="basehat" d="M543.857 432.104v-4.603l13.269.001v4.602l4.74.001v2.117l-22.748-.001v-2.117h4.739z"
fill="#7b417b" />
<path id="ribbon" fill="#461a3e" d="M543.894 429.976h13.197v2.119h-13.197z" />
</g>
<ellipse id="hill" transform="matrix(.6758 0 0 .69775 255.583 569.102)" cx="591.71" cy="677.514" rx="553.629"
ry="533.026" fill="#461a3e" />
</g>
</svg>
</div>
</div>
Here's a code pen.
Optimally what I'd like to achieve is that the image gradually crops from the top as the screen size increases. I'd like to be able to control the position of the cat and maybe the zoom of the image, so basically the amount of cropping from all sides depending on screen/window size...maybe?
I am having trouble wrapping my head around the math of this and I've never really done this level of styling before. Help is greatly appreciated!

Answer 1

To be sure I'm following properly, you're looking for input/interaction beyond responsive elements being displayed based on the user's viewport size?
If you just need the cat to be at the top of the screen based on size in initial view, there are two ways:
Using SVG to crop and scale images. Sara Souedian has an article on this.
Using responsively served images based on breakpoint, which some frameworks can augment by also providing scaling and focal-point cropping of images, or being set manually). That could work, but the image would then be a set size and placement, only changing in layout if the user adjusted their viewport width (or rotated a mobile tablet device).
These approaches can work, but may not cover all of your use cases.
On the other hand, If user input such as scrolling is being used to determine action, you will probably be better served by using Javascript event listeners such onscroll, which enable you to manipulate elements based on these inputs.
There are many ways ways you could try, but I would suggest these to start:
Breaking out your SVG into separate elements that you can manipulate within your HTML. There's a lot that can be done with pure CSS3 animations, but as far as I know, don't have event listeners at this time, should would require some JS for DOM manipulation based on user input.
Using a JS animation/visualization framework which would allow you to keep all elements within JS, where SVG elements can be drawn/manipulated within it. Unless your Javascript knowledge is strong, this would be probably be the best course if you go this route.
Whatever route you go, it will be good to keep your target audience in mind, especially when it comes to browser/device incompatibility.