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

Question

Below is my image_url

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

I want to set this image as the cover picture on the below page

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

But this image is getting cropped automatically. I don't want to generate separate size for this. So, how can I crop the custom part of the image and maintain the aspect ratio at the same time.

Answer 1

You can use the below module to generate custom size images with various cropping techniques on frontend. Also it supports S3 as you are using S3 for your images.

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

Answer 2

use this css on your banner image css

---

background-size: cover;

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

You need the background size to be changed like so, or tweak it to your liking.

background-size: cover 

Will simply crop it automatically and will probably lose the ratio and look deranged, however, when you put it 100% auto, it makes the width perfect and crops the top and bottom if needed, or you can switch it, do as you like! :D

Answer 4

you can also use this module Easy thumbnails module. Also, it was vew more options plus it will serve your purpose smoothly. It has both the options of backend and frontend and it is easy to migrate if you want to , later at some point of time.

insted of background, you can replace it by django template inside that div and apply easy-thumbnail module there

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

Answer 5

Use a combination of css background-position and background-size to position the image.

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

 <header />