html – 如何防止图像被裁剪

概述我正在尝试创建一个包含大量图层的动画图片. 为了在不同的屏幕上使用正确比例的图像,我使用了封面css属性值(我已经尝试过将其用于图像的对象拟合和背景图像的背景大小).这就是为什么我在宽屏幕上的图像被浏览器歪曲的原因. 问题是我的图层在动画过程中被变换(主要是旋转和移动),因此有时会看到裁剪后的图像. 请参阅下面的示例. 如何预防？还是有其他一些技巧？ body { margin: 0; p 我正在尝试创建一个包含大量图层的动画图片.
为了在不同的屏幕上使用正确比例的图像,我使用了封面CSS属性值(我已经尝试过将其用于图像的对象拟合和背景图像的背景大小).这就是为什么我在宽屏幕上的图像被浏览器歪曲的原因.

问题是我的图层在动画过程中被变换(主要是旋转和移动),因此有时会看到裁剪后的图像.

请参阅下面的示例.

如何预防？还是有其他一些技巧？

body {  margin: 0;  padding: 0;  /*Just to imitate wIDe screen*/  wIDth: 1000px;  height: 450px;}#container {  wIDth: 100%;  height: 100vh;  /*Just to imitate wIDe screen*/  height: 100%;  overflow: hIDden;  position: relative;}.layer {  height: 100%;  position: absolute;  wIDth: calc(100% + 20px);}.layer img {  height: 100%;  wIDth: 100%;  object-fit: cover;}.gulls {    animation: gulls ease-in-out 13s infinite alternate;}@keyframes gulls {  from {    transform: rotate(3deg) scaleX(0.95) skew(-10deg,-10deg);  }  to {    transform: rotate(-3deg) scaleX(1.05) skew(10deg,10deg);  }}

<div ID="container">  <div >    <img src="https://firebasestorage.GoogleAPIs.com/v0/b/wedding-42174.appspot.com/o/animation%2Fsky.png?alt=media&token=25033588-d58c-4616-94e9-4974ec4157a4" alt="">  </div>  <div >    <img src="https://firebasestorage.GoogleAPIs.com/v0/b/wedding-42174.appspot.com/o/animation%2Fgulls5.png?alt=media" />  </div></div>

目前我有这个：https://jsfiddle.net/koljada/c08qdw1m/

解决方法 图像可以使用带溢出的容器div进行裁剪：隐藏; position：relative,所以你可以用position：absolute定位里面的图像.必须将图像的顶部和左侧CSS属性设置为负值.

通过使用正弦和余弦函数可以找到图像的精确值.

body {  margin: 0;  padding: 0;  /*Just to imitate wIDe screen*/  wIDth: 200px;  height: 100px;}#container {  wIDth: 100%;  height: 100vh;  /*Just to imitate wIDe screen*/  height: 100%;  overflow: hIDden;  position: relative;}.layer {  height: 100%;  position: absolute;  top: -20px;  left: -20px;  wIDth: calc(100% + 20px);}.layer img {  height: 150%;  wIDth: 150%;}.gulls {    animation: gulls ease-in-out 3s infinite alternate;}@keyframes gulls {  from {    transform: rotate(3deg) scaleX(0.95) skew(-10deg,10deg);  }}

<div ID="container">  <div >    <img src="http://via.placeholder.com/350x150/000000" />  </div></div>

总结

以上是内存溢出为你收集整理的html – 如何防止图像被裁剪全部内容，希望文章能够帮你解决html – 如何防止图像被裁剪所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。