CODEWITHSUNDEEP
imagecoldfusion
Andi
Andi

Reputation: 71

ColdFusion: ImageScaleToFit

I have an image Slider with different images. Some of the images has the size ratio of 600x400px, others 400x600px.

But the gallery has the width of 570px and height of 350px.

I want to resize the pictures. They should go in the 570x350px size, without distortions.

I tried this:

<cfimage 
    action = "read" 
    source = "#getPfad.Wert##getBild.Dateiname#" 
    name = "bild_gross"
>
<cfset ImageSetAntialiasing(bild_gross)> 
<cfset ImageScaleToFit(bild_gross,570,350)>
<cfimage 
    action="writetobrowser"
    source="#bild_gross#"
>

But the image size won't change! The images are cut off.

Edit: The code works, if I try it without the gallery.

<div id="bilder">
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:706px;padding-left:0px; padding-right:146px;margin:0px auto 0px;">
    <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
        <ul class="amazingslider-slides" style="display:none; ">
            <cfloop query="getBild">
                <li>
                    <a href="#getPfad.Wert##getBild.Dateiname#" class="html5lightbox">
                        <cfimage 
                            action = "read" 
                            source = "#getPfad.Wert##getBild.Dateiname#" 
                            name = "bild_gross"
                        >
                        <cfset ImageSetAntialiasing(bild_gross)> 
                        <cfset ImageScaleToFit(bild_gross,570,350)>
                        <cfimage 
                            action="writetobrowser"
                            source="#bild_gross#"
                        >
                    </a>
                </li>
            </cfloop>
        </ul> ...

Does anyone know, what I can do?

Upvotes: 1

Views: 390

Answers (2)

James Moberg
James Moberg

Reputation: 4475

How about using CSS? object-fit enables you to crop an inline image by specifying how it squishes and stretches inside its box. Using cover will enable the image to fill the height and width of its box while maintaining the aspect ratio but auto-crop the image if needed. (I'm not sure whether IE fully supports this yet or not, but there's a hack in the link below.)

<img src="/myimage.jpg" style="object-fit:cover;" width="570" height="350">

More info at https://css-tricks.com/almanac/properties/o/object-fit/

Upvotes: 3

Vlad
Vlad

Reputation: 1167

I suggest don't do image processing in your display/view. ImageScaleToFit function will resize the image and will use server resources each time users visit.

Have a separate function to process and resize those images. Then use the <img> tag to display those images. Using the img html tag will give you more options in controlling your display.

Upvotes: 2

Related Questions