gpt4 book ai didi

html - 纯 CSS 图像缩略图

转载 作者:技术小花猫 更新时间:2023-10-29 12:11:22 25 4
gpt4 key购买 nike

我想在网格中显示一组图像缩略图。图片将有多种尺寸,但我想将缩略图限制为特定尺寸(比如 200px 宽和 150px 高)。

我想找到一些神奇的 HTML 标记和 CSS 规则,它们将

  1. 允许图像包含在正常 <img> 中元素
  2. 确保缩略图适合其 200x150 像素框,保持其比例,并在溢出的任何尺寸中居中。
  3. 不需要 JavaScript 或每张图片实际尺寸的特定知识

我不确定这是否可行。我可以使用以下标记对我想要的内容进行(错误的)近似:

<div class="thumb">
<img src="360x450.jpeg">
</div>

和 CSS:

.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}

这种尝试以多种方式失败:

  1. 纵向图像的大小会正确调整,但会溢出容器底部,导致垂直偏离中心的裁剪。

  2. 由于硬编码width,宽而短的图像将在水平维度上扭曲。和 min-height规则。

  3. 但没有硬编码 width , 大于最小高度和宽度的图像根本不会调整大小。

如果它有任何帮助,我在这里举了一个例子(希望)来说明我正在尝试做的事情:

我知道我可以通过省略 <img> 来解决这个问题元素,而不是将缩略图作为包含元素的居中背景图像拉入,但是,如果可能的话,我想保留 <img>页面中的元素。

感谢您提供的任何帮助或指点!

编辑:我想我应该注意到,理想的解决方案适用于 IE 6+ 和现代浏览器,但任何适用于 IE 9+ 和其他现代浏览器(最近的 WebKit、Gecko、等)将很乐意接受。

最佳答案

您可以(某种程度上)通过添加 CSS3 background-size 来实现这一点:containcover

Live Demo

  • contain(上图)适合整个图像,保持纵横比。没有任何裁剪。

  • cover(下图)垂直或水平(取决于图像)填充包含元素并裁剪其余元素。

关于html - 纯 CSS 图像缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6131049/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com