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 apply local styles / JS to UIWebview after loading a URL

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    How to conditionally load CSS

    Showing images in placeholder on focus

    How to style a link which wrote with echo? [closed]

    How to change CSS according time with JavaScript

    How can mono social icon work without a class per icon?

    how to set html inline css from django

    How to layer elements with CSS position property?

    How to change position of Semantic UI sidebar for different screen sizes?

    In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

    How do I set a CSS url to an absolute location?

    How to create a speech bubble in css?

    How to select two elements with “> span” in CSS?

    How to change CSS with jquery?

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    How to attach click event to a css styled checkbox

    Table border not showing up

    How to style PushButton's image size on hover/pressed in Qt4 using CSS

    How can I :hover over different links in one line while getting the spacing correct?

    How to make text disappear when HTML5 Video has finished loading?

    How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]

    SASS: How to exclude part of selector

    how to apply css on only one class?

    How do I constraint an animation using only CSS and HTML?

    How to prevent the CSS `:before` text being editable while the `div` itself is editable?

    Hide element, but show CSS generated content

    How to force div width with CSS to stretch to its content but not to be restricted by its container?

    css animation how to get the ball to bounce

    I want to override some CSS that says border:none to have border bottom. How can I do this?