Question

以下是我的image_url

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

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

Answer 1

您可以使用以下模块在前端生成具有各种裁剪技术的自定义尺寸图像。此外，它还支持S3，因为您正在为图像使用S3。

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

Answer 2

在横幅图片css上使用此css

background-size：cover;

Answer 3

ldap.SERVER_DOWN: {'desc': "Can't contact LDAP server"}

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

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;
}

只是自动裁剪它并且可能会失去比例并且看起来很疯狂，但是，当你把它100％自动时，它会使宽度完美并在需要时裁剪顶部和底部，或者你可以切换它，做到你喜欢！：d

Answer 4

您也可以使用此模块轻松缩略图模块。此外，它有更多的选择加上它将顺利地为您的目的服务。它有后端和前端的选项，如果你愿意，可以在以后的某个时间点轻松迁移。

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

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

Answer 5

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

＆＃13;

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

＆＃13;

<header />

＆＃13;

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

5 个答案: