0

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

Devon
  • 159
  • 1
  • 2
  • 15

2 Answers2

0

You could:

  1. Find out whether your image is too large and apply a too-large class to it, if it is.
  2. Resize img.too-large using CSS to get your preferred size (set absolute width and height). .img_thumb.too-large { width: 1234px; /* put your own / height: 321px; / preferred size here */ }

  3. Emulate "crop":

    .img_thumb_holder {
    /* your previous code */
    position: relative;
    overflow: hidden;
}
.img_thumb.too-large {
    position: absolute;
    left: -123px;    /* use your own numbers here */
    top: -456px;    /* to position image as you see fit */
}

Or you could display the image as background-image and do the whole thing in a completely different way, as another answer suggests.

Community
  • 1
  • 1
hon2a
  • 7,006
  • 5
  • 41
  • 55
  • nice, actually this is much better, how did u know to use -123px and -456px? – Devon Nov 26 '14 at 06:52
  • Those are just sample values. Use your own values appropriate for showing the part of the picture you want to `crop` to. (I.e. if the corner of the "crop" is at `(88px, 124px)`, use `left: -88px; top: -124px`.) – hon2a Nov 26 '14 at 10:07
  • yup ok.. but i have various images of different big size example 3000 x 800, 6000 by 2000, the cropping will be weird if it suits for one but not another, is there any way i can crop right at the center, like for background-image i can center it. But i like to do it on img src instead of background-image since all my remaining codes revolve around img src.. – Devon Nov 26 '14 at 11:25
  • If you put your `.too-large` class only on the images you know you'll first be resizing to a "preferred size" (see my answer), then you know the display size of the images. You can then easily calculate your position as `-(width / 2) + (containerSize / 2)` (similarly for height). – hon2a Nov 26 '14 at 11:28
0

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>
Alessandro Marchisio
  • 535
  • 3
  • 11
  • can u do a simple fiddle for me to try? – Devon Nov 25 '14 at 08:32
  • simple and working perfectly, may i know the different from using center and center center? – Devon Nov 26 '14 at 05:57
  • is there any way i can do the same thing to a image src instead? My code has alot of multiple uses of the same src, once i change it to background-image my code is all screwed up.. – Devon Nov 26 '14 at 06:47
  • with background-position you can specify horizontal position and vertical position separatly. If the two value are the same you can write just one. – Alessandro Marchisio Nov 26 '14 at 16:15
  • You can convert an image whit a div with a background-image but you *must* size the div with the exactly dimension of the images – Alessandro Marchisio Nov 26 '14 at 16:24