Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jason D 66 posts 218 karma points
    Jun 18, 2020 @ 21:33
    Jason D
    0

    Use Image Crop's Scaled (Zoom) in Background CSS?

    I've searched far and wide, and can't find this bit of info:

    For the purpose of using ImageCropper for CSS background-image, I am at the last piece, where I would like to utilize the "Scale" feature of the crop. If an editor scales an image (zoom in or out), what property(s) do I need to use in my "style" to render the scale? I have the focal points, etc, figured out and working. Here's my (razor) code:

     @if (Model.MastheadBackground != null)
    {
        Image img = (Image)Model.MastheadBackground;
        var focalPoints = img.UmbracoFile.FocalPoint;
        var bgPos = focalPoints.Left.ToString("#0.##%", System.Globalization.CultureInfo.InvariantCulture) + " " + focalPoints.Top.ToString("#0.##%", System.Globalization.CultureInfo.InvariantCulture);
    
           <div style="background-image: url('@img.Url'); background-repeat: no-repeat;@(!String.IsNullOrEmpty(bgPos) ? "background-position: " + bgPos + ";": null) background-size: 100%;"></div>
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft