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..

    CSS question: how to remove the border from an image in WordPress

    How to use css to crop parts of an image

    How can I make 3 circles with a different radius “stick” together? (with example image)

    How to remove class using CSS

    Div doesn´t show background color after float:left

    How to center content vertically with unknown content and fixed layout

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How to override nth-child

    how to stop css hover out with a conditional

    Third level drop down css wont show & content/links are out of order?

    How to do navbar fixed?

    How to left-align and right-align elements in one row using flexbox?

    How to programmatically ungroup CSS selectors?

    Two navbar-inner on the same page how to change the padding of each?

    How to make the height REALLY 100%

    how can I center the image in my div? (so far the left border of my img is centered)

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to use a CSS Framework with Yesod?

    How can I prevent a flex container from overflowing/underflowing?

    How to make space visible in between an unsorted list in HTML/CSS?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How can I have multiply a pixel width value with LESS Css?

    How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?

    how to keep the aspect ratio of an image in bounding box - CSS

    How can I target a block after another block with css?

    How Is This Effect Achieved? HTML/CSS/jQuery [closed]

    How to apply multiple CSS3 rotation transformations (compounded) without javascript?

    How to adopt drop down menu for mobile devices? [closed]

    How to start an css effect when website open