如何将完整图像设置为 <div> 的背景答案

【问题标题】：How to set complete image as a background of <div>如何将完整图像设置为 <div> 的背景
【发布时间】：2016-09-24 07:56:08
【问题描述】：

下面是我的图片网址

https://s3-ap-southeast-1.amazonaws.com/nearfox-other-images/imagebeautiful_hair_model_salon_124591669_large__20160501120024380271.jpg

我想将此图片设置为下面页面的封面图片

https://nearfox.com/mumbai/p/aura-thai-spa-borivali-west

但是这张图片会被自动裁剪。我不想为此生成单独的大小。那么，如何裁剪图像的自定义部分并同时保持纵横比。

【问题讨论】：

寻求建议的问题是 Stack Exchange 上的 off topic。
我不是在寻求建议。我需要一个解决方案。
“有什么方法/工具/库可以...”如果您希望问题保持打开状态，则必须对其进行编辑。
编辑@JamesFenwick

标签： html css django amazon-s3

【解决方案1】：

您可以使用以下模块在前端使用各种裁剪技术生成自定义大小的图像。它还支持 S3，因为您将 S3 用于图像。

https://github.com/mariocesar/sorl-thumbnail

【讨论】：

这可能符合我的目的。让我详细看看它。谢谢

【解决方案2】：

在你的横幅图片 css 上使用这个 css

背景尺寸：封面；

【讨论】：

【解决方案3】：

element.style {
    width: 100%;
    height: 100%;
    background: url('https://s3-ap-southeast-1.amazonaws.com/nearfox-other-images/imagebeautiful_hair_model_salon_124591669_large__20160501120024380271.jpg') center;
    background-size: 100% auto;
}

您需要像这样更改背景大小，或者根据自己的喜好调整它。

background-size: cover

只会自动裁剪它，可能会丢失比例并且看起来很混乱，但是，当您将其设置为 100% 自动时，它会使宽度变得完美并根据需要裁剪顶部和底部，或者您可以切换它，执行以下操作你喜欢！ :D

【讨论】：

但我想保持纵横比并同时显示图像的自定义部分。也许像从左上角裁剪直到我得到所需的纵横比。

【解决方案4】：

你也可以使用这个模块 Easy thumbnails 模块。此外，它还有更多选择，而且它将顺利地为您服务。它同时具有后端和前端选项，如果您愿意，可以在稍后的某个时间点轻松迁移。

背景，你可以用那个div里面的django模板替换它，然后在那里应用easy-thumbnail模块

https://github.com/SmileyChris/easy-thumbnails

【讨论】：

【解决方案5】：

使用 css background-position 和 background-size 的组合来定位图像。

header {
  height: 180px;
  width: 500px;
  background: url('http://i.stack.imgur.com/t5h38.jpg');
  background-position: 70% 40%;
  background-size: 150% auto;
}

&lt;header /&gt;

【讨论】：