我在容器流体中的位置连续放置了一个SVG，它的位置是：绝对，因为我需要它在背景中/具有div和标题和文本的前面。我计划与用户的滚动交互地对SVG进行动画处理，因此这就是为什么我将其作为嵌入式SVG而不将其设置为背景图像的原因。因此，考虑到这一点，我认为必须拥有绝对位置。其父级设置为相对。
无论屏幕大小如何，当用户位于页面顶部时，我都有一部分图像（猫，如果您看一下图像）需要聚焦。现在，当屏幕尺寸放大从而使猫消失时，图像会从底部开始裁剪[ed：从技术上讲，图像不会裁剪，但是由于顶部没有裁剪，底部消失了。]
.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>
最理想的是，随着屏幕尺寸的增加，图像从顶部开始逐渐出现。我希望能够控制猫的位置，甚至可以控制图像的缩放比例，所以基本上可以根据屏幕/窗口的大小从各个方向进行裁剪的数量...？
我在解决这个问题时遇到了麻烦，而且我以前从未真正进行过这种样式的设计。非常感谢您的帮助！
答案 0 :(得分：1)
为确保我能正确跟踪，您是否在根据用户视口的大小显示正在显示的响应元素之外的输入/交互？
如果只需要根据初始视图中的大小将猫放在屏幕顶部，则有两种方法：
使用SVG裁剪和缩放图像。 Sara Souedian对此有一个article。
使用基于断点的响应式服务图像，某些框架可以通过提供图像的缩放比例和焦点裁剪或手动设置来增强断点。那可能行得通，但是图像将是一个设定的大小和位置，只有在用户调整视口宽度（或旋转移动平板设备）的情况下，布局才会改变。
这些方法可以使用，但可能无法涵盖您的所有用例。
另一方面，如果使用诸如滚动之类的用户输入来确定操作，则可以使用Javascript事件监听器（例如onscroll）来更好地为您提供服务，该监听器使您能够基于这些输入。
您可以尝试多种方式，但我建议您从以下几种开始：
无论走哪条路，最好都牢记目标受众，尤其是在浏览器/设备不兼容的情况下。