html - 用CSS做一个相对定位的div方 block

Question

我想知道是否有一个纯 CSS 解决方案来确保相对定位的 div 在任何情况下都完全是正方形；我有一个脚本，允许用户上传图像，并将其应用于背景图像属性。

问题是系统需要支持所有尺寸的图片，所以我不能只设置特定的高度和宽度。

Answer 1

第一步

只需将 div padding-bottom 设置为 100% 即可创建固有比例，这意味着无论宽度如何，div 始终为正方形。然后使用 position: relative/absolute 来定位一个拉伸(stretch)整个容器的子元素。

这是一种常见的纯 CSS 技术，可以以特定的宽高比嵌入视频，但并不限于特定的内容类型。

我创建了一个 fiddle 来查看它的运行情况。请注意:我在这里使用了 SuitCSS 的 flex 嵌入组件，但您并不一定要使用它。

http://jsfiddle.net/mlnmln/tfm6q/1/

HTML:

<div class="FlexEmbed FlexEmbed-ratio">
  <div class="UserImage FlexEmbed-content"></div>
</div>

CSS:

/*
 * FlexEmbed component from suit-css. 
 * @see: https://github.com/suitcss/components-flex-embed/blob/master/lib/flex-embed.css
 * @see: http://suitcss.github.io/components-flex-embed/test/
 * @see: http://alistapart.com/article/creating-intrinsic-ratios-for-video
 */ 

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

/**
 * The aspect-ratio hack is applied to an empty element because it allows
 * the component to respect `max-height`. Default aspect ratio is 1:1.
 */

.FlexEmbed-ratio {
  display: block;
  padding-bottom: 100%;
  width: 100%;
}

/**
 * Fit the content to the aspect ratio
 */

.FlexEmbed-content {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

第 2 步

找到一种调整图像大小以适应/填充其容器的方法。我会建议以下解决方案。

1. 后端:通过 GDlib 或 ImageMagick 等图像处理库裁剪图像。这样，用户只需下载他们需要的数据。

2. CSS:如果您不关心旧版浏览器支持并且无权访问服务器端图像处理，请使用 background-size: cover。

   .用户图片{ 背景尺寸:封面；
   背景图像:url(http://placekitten.com/200/400)；

3:JS:使用 DOM 操作定位和裁剪图像容器。这与使用服务器端图像库基本相同，缺点是您将负载放在客户端(带宽和处理)。

希望能有所帮助。