【问题标题】: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中图片的比例。我不知道是否有人可以帮助我。谢谢大家提前收看。

程序示例

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

【问题讨论】:

  • 你是说当前设置为 30px x 30px 的 demo-s 应该以比例显示图像吗?这是在那个正方形内(非常小)还是拉伸 div - 如果是宽度或高度?

标签: java html jquery css


【解决方案1】:

而不是width: 300px

试试

width: absolute;

【讨论】:

【解决方案2】:

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

如果这是您想要的,请尝试:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-10
    • 1970-01-01
    • 1970-01-01
    • 2013-07-13
    • 1970-01-01
    • 2013-04-04
    相关资源
    最近更新 更多