如何使用css使链接中的照片与比例匹配？

mu0hgdu0 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(275)

我有一个问题，我的英语不是很好，但我试着完整地描述它。
目前标签href中有一张图片，点击后会打开一张大图！但是，标签中href中当前显示的图片在不同的设备中并不相同。我想调整此链接中图片的设置，以便其中的图片可以匹配比例？
我尝试了以下设置：

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

但仍然无法调整标签中href中图片的比例。我不知道是否有人能帮我。谢谢大家提前收看。
程序示例
https://codepen.io/hong-wei/pen/vymwazp?editors=1100

2条答案

而不是 width: 300px ,
尝试

width: absolute;

根据您给出的代码，缩略图（demo-s）容器大小固定为30px x 30px，看起来好像您希望图像覆盖它，这对于缩略图来说是一种非常常见的方式-因此所有缩略图保持相同的大小，但可能只显示其图像的中心部分。
如果这是您想要的，请尝试：

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

如果没有，你能再解释一下你想要的缩略图是什么样子吗？