时间戳

首页 > 解决方案 > 如何使用 CSS 使链接中的照片符合比例？

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

问题描述

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

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

我尝试了以下设置：

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

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

程序示例

https://codepen.io/hong-wei/pen/vYmWazP?editors=1100

标签： javahtmljquerycss

解决方案

从您给出的代码中，缩略图（demo-s）容器大小固定为 30px x 30px，看起来您希望图像覆盖它，这对于缩略图来说是一种非常常见的方式 - 所以所有缩略图都会保留大小相同，但可能仅显示其图像的中心部分。

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

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

如果没有，您能否再解释一下您希望缩略图看起来像什么？

推荐阅读