html - 如何在不丢失任何图像的情况下将 "resize"矩形图像转换为方形图像?

标签 html css

<分区>

如何在不丢失任何图像的情况下将矩形图像“调整”为方形图像?

这是一个不允许脚本标签的 eBay 列表,所以我想避免使用 JS 和我们的 CSS。

http://www.garralab.com/nailthumb-examples.php 请参阅 - 示例 > 调整大小。

这只能在 CSS 中实现吗?

最佳答案

有一个解决这个问题的方法是使用背景。如果您有未知尺寸的图片,可以使用 background-size:cover 制作 squire 缩略图。

<div class="thumbnail" style="background-image:url(print/the/image/path.jpg);"></div>

.thumbnail {
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
}

background-size:cover; -- 将使任何图像覆盖整个区域。

关于html - 如何在不丢失任何图像的情况下将 "resize"矩形图像转换为方形图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23127515/

相关文章:

javascript - 是否可以使用一个脚本将多个 href 移动到一个类,而不必使用 nth-child

javascript - 使用 jQuery 更改数据属性

javascript - Chrome 切断边框和其他视觉故障

html - 如何将此导航栏向右移动

html - 如何在输入焦点上设置渐变边框动画?

html - Bump Up Hover 效果,破坏元素下的线条

java - 背景图像在 html 中不起作用

html - IFrame 请求已取消

html - 如何根据屏幕尺寸调整 Bootstrap 列的大小和重新排序

html - 在 Rails 中围绕内容包装 Link_to