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

my css

.container .img_thumb_holder{
background: black;
position: relative; 

.container .img_thumb{ 
width: 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 {
    background-size: 300px;
    background-position: center center;


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

    CSS Howto..

    CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first) [closed]

    How to create nested diamond shape using CSS?

    How can I make a fade in function without using jQuery like this? (JavaScript)

    How should I divide up CSS files to support multiple devices?

    How to make a left and right panel, and be able to slide a divider between them?

    How to get names of css classes of an element

    How to set a relative position/size to the screen for elements in CSS/HTML? [closed]

    CSS: how to set width to children's width?

    How to add a CSS specifc for Google Chrome? [duplicate]

    CSS: How to make an image-border

    How to fit the title to the entire page

    How to format an HTML table using CSS for printing?

    How do I center text vertically with css [duplicate]

    How do i hide html until its processed with javascript?

    How to set width of DIV to span with text inside it (so not fixed)

    How to display sub sub menu to the left side using CSS?

    How to fade in a specific CSS property

    How to line up items of varied length in a resizable space in CSS?

    How to create zebra-stripe CSS with TAL?

    CSS How to put an image between buttons?

    How do I set a custom style to a BorderConatiner in Dojo using CSS

    How to achieve this layout with div and css?

    How to get rid of scroll bars/arrows in Wordpress, when using font style called 'Pre'

    In what circumstances is flex-shrink applied to flex elements and how does it work?

    How to keep table headers fixed while scrolling down a table

    How to get uncompressed css output while using LESS(less-watch-compiler.js)?

    CSS how to place an image to the right of variable width text on roll over?

    How can I scale the space taken by a scaled element

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    css: how to center box div element directly in center?