如何使用 CSS 使链接中的照片符合比例？答案

【问题标题】：How to use CSS to make the photos in a link match the proportions?如何使用 CSS 使链接中的照片符合比例？
【发布时间】：2021-10-01 03:27:09
【问题描述】：

我有一个问题，我的英语不是很好，但我尽量完整地描述它。

目前在一个label中href中有一张图片，点击后会打开一张大图！但是标签中href中当前显示的图片在不同的设备上是不一样的。我想调整一下这个链接里的图片的设置，让里面的图片能符合比例？

我尝试了以下设置：

background-position:center center;
background-size: cover;
object-fit:cover;

但是还是不能调整标签中href中图片的比例。我不知道是否有人可以帮助我。谢谢大家提前收看。

程序示例

【问题讨论】：

【解决方案1】：

而不是width: 300px，

试试

width: absolute;

【讨论】：

【解决方案2】：

根据您提供的代码，缩略图（演示-s）容器大小固定为 30 像素 x 30 像素，看起来您希望图像覆盖它，这对于缩略图来说是一种非常常见的方式 - 所以所有缩略图都保持相同大小，但可能只显示其图像的中心部分。

如果这是您想要的，请尝试：

.demo-s img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

如果不是，您能否详细解释一下您希望缩略图是什么样的？

【讨论】：