Question

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

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

Answer 1

第1步

简单地给div填充底部100％创建一个固有比率，这意味着div总是正方形，无论宽度如何。然后使用position：relative / absolute来定位一个拉伸整个容器的子元素。

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

我创造了一个小提琴来看它的实际效果。请注意：我在这里使用了SuitCSS的flex embed组件，但您绝不会使用它。

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步

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

后端：通过GDlib或ImageMagick等图像处理库裁剪图像。这样，用户只需下载他们需要的数据。
CSS：如果您不关心旧版浏览器支持且无法访问服务器端图像操作，请使用background-size：cover。

.UserImage { background-size：cover;
background-image：url（http://placekitten.com/200/400）; }

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

希望能提供帮助。

使用CSS制作一个相对定位的div广场

1 个答案: