我有一张图片，里面包含了一些Map，我试图用一个带缩略图滑块的img轮播来单独显示每一张Map。我想裁剪每一张Map，让它像它自己的图像文件一样缩放。尝试使用CSS，而不是在照片编辑器中裁剪新文件。我四处寻找，发现了很多关于CSS裁剪的东西，但不知道如何进行裁剪缩放。
这是原始图像-https://www.floridamemory.com/FMP/maps/large/fmc0001.jpg
我还没有建立旋转木马，但我创建了类，将用于改变图像的作物，但不能得到图像的规模。
https://codepen.io/admaloch/pen/QWVxgzz?editors=1111
有没有可能只用css就能做到这一点？
1条答案
按热度按时间3bygqnnd1#
是的，你可以只使用CSS，你的方法也可以工作。
但是你必须相当精确地测量，最重要的是要正确地获得单个Map的宽高比。
你不能在宽度和高度上都使用100%的相对设置，因为在你设置的时候，这些设置会随着视口的变化而变化。
一种开始的方法是将main-img的宽度设置为100%，然后将aspect-ratio设置为合理的值（例如，确保键保持可见）。2 / 3应该这样做，但取决于你有多少以上和以下的每一个Map，你想包括。
加上%s的精确测量，这应该足够了。
如果你卡住了就告诉我。