Question

我有两个div，宽度为30％和70％，固定高度为高度：100vh;因为项目需要让滑块始终是您正在查看的屏幕的高度。

但我似乎无法弄清楚如何修复图像的宽高比？正如您在测试链接中看到的那样，图像很窄？

这里是链接：[已删除链接已删除]

请注意，这是我正在构建的原型，所以它仍然很丑陋****：）

抱歉我不太擅长编码（还在学习）

Answer 1

您的图像正在拉伸，因为您已将宽度和高度都设置为100％，因此浏览器使图像宽度适合div宽度（比图像的纵横比更薄）。

快速解决方法是按如下方式修改CSS：

.cycle-slideshow img {
  width: auto;
  height: 100vh;
}

这告诉浏览器将高度设置为100％，然后相应地调整宽度以保持图像的正确宽高比。

虽然，如果浏览器窗口比它高很多，你可能需要一些后退，因为那时你会看到图像的边缘。