jquery/css how to rescale and crop a large image to fit my display div?


Tags: jquery,html,css

Problem :

So basically i have a few div holder that i set at 192px width and 192px, and i set all the img class .img_thumb to fit 100% of the div holder width and height, rescaling the image to fit within 192px.

What i want to do ideally is to for example a image over 3000 width/height, i want to on the fly, rescale the image that is reasonably for the 192px, and crop the middle of the image and place it in the div holder. Anyone got any suggestions? This is what i have so far

my html

<div class="content sixteen full columns float-l">
    <div class="img_thumb_holder float-l">
        <img class="img_thumb" alt="portfolio">
    </div>
</div>

my css

.container .img_thumb_holder{
width:192px;
height:192px;
background: black;
position: relative; 
}

.container .img_thumb{ 
width: 100%; 
height:100%;
}

Do note that i want to rescale and crop part of the image, not just rescale to fit the whole image in the div holder. Thanks



Solution :

you can use background-image and background-position amd background-size

.img_thumb_holder {
    width:192px;
    height:192px;
    background-size: 300px;
    background-position: center center;
}

and

<div class="img_thumb_holder float-l"   style="background-image: url(....)">&nbsp;</div>

    CSS Howto..

    How to change my online store template in dbdirector ecommerce platform

    how to remove table border line?

    How can I change the entire background color of a page?

    How to Fade in AFTER the Page has Loaded: Javascript

    How to insert instance variable as css rule in Rails?

    How to serve different css files to different ajax pages?

    How to create a variable from CSS class attribute?

    How to make a background-color transition that eventually covers div to center? [closed]

    How to add style or put a class in a php form_submit button

    How to force Dojo TitlePane to overlap with CSS?

    How to fill the width under an image with a caption without defining the width of the caption?

    How do I make an expanding textbox?

    Give a box an ID, once clicked shows alert of that ID?

    Nested CSS: How to get to the child?

    Vim: How would I recursively run “:sort” for everything between curly braces?

    How to align tags withina div

    If you remove float: left they are centred, in combination with setting text-align: center with their parent div. That is, their immediate (first) parent div; give this an id....
    Read more

    how to define css to get the simple tabbed menu

    How to draw a horizontal line between two circles with css?

    How to get overlay to fill scrollable parent using pure CSS?

    How to remove last TD in first LINE

    how to make background css url dynamic using jquery

    HTML/CSS How to have to tags on same line?

    How to select a non unique element through CSS

    CSS : How can I add shadow to a label or box

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    DotNetNuke Skinning: How do I use\add skin.css?

    I need to edit the css properties of a link when it's active (a:active) with jquery after they have been set by normal html css. How do I do that?

    How to change CSS style of div after onclick method

    How to prevent division when using variables separated by a slash in CSS property values

    How to apply asynchronously fetched CSS into view