Need to cutoff img left and right

Question

I have a div and it's width is 950px. I've inserted an img inside the div. The img width is 960px.
So my question is if I inserted 960px width image inside the div want to crop 5px from right and 5px from left. Also need to the align the image middle and center.
I cannot have a fixed width for the img like 960px may be 1000px or any value. So in each case I have to cut the img left and right proportionally.

I have alredy tried this but its not working center oversized image in div

can't you make image of 950px, otherwise try with `background-position' — Atal Shrivastava, Jun 04 '14 at 05:59
Could you post what you tried to do? Maybe set up a www.fiddle.net to help people help you. — Andrew, Jun 04 '14 at 05:59
@AtalShrivastava I can't make the image 950px bcoz its from Joomla banner system. — jijith, Jun 04 '14 at 06:02
When I tried with Overflow hidden the image width is 960px the 10px is extending to the right side only, is that possible to make 5px left and 5px right — jijith, Jun 04 '14 at 06:04
@jijith can you show the image as some `background-image` or you ***have to*** use it in some `` tag? — King King, Jun 04 '14 at 06:04

score 1 · Answer 1 · answered Jun 04 '14 at 06:27

This is a common problem for every developer.

I'm using javascript (jQuery) to solve this problem affectively.

When window loads, (finishes loading all entites on the page) get the overflow images and re-align from left and top.

function centerImages(){
    // you can define an exect area but we will do this for all images for now.
    var $images = $('img');

    $images.each(function(){
        var $pWidth = $(this).parent().width();
        var $pHeight = $(this).parent().height();
        var $width = $(this).width();
        var $height = $(this).height();

        if($pWidth < $width) var $wDiff = ($width - $pWidth) / 2;
        if($pHeight < $height) var $hDiff = ($height - $pHeight) / 2;

        $(this).animate({
            marginLeft: '-'+$wDiff+'px',
            marginTop: '-'+$hDiff+'px'
        });
    });   
}

centerImages();

Demo: http://jsfiddle.net/Q4mQT/

Note: This example is an example to see what can do for this problem. There can be many improvements but i need no time for a complete solution. So this is a basic solution.

score 0 · Answer 2 · answered Jun 04 '14 at 06:05

0

Try this:

<div class="container">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />
</div>
<br/>
<br/>
<br/>
<img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />

css:

.container {
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
    margin: 100px;
}
.container img {
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    margin: -240px 0 0 -320px;
    position: absolute;
}

margin -240px is the height of the image (480px) divided by 2, and margin -320px is the width of the image (640px) divided by 2.

Example

answered Jun 04 '14 at 06:05

Barnee

3,212
8
41
53

i cant place two image, its a joomla module, i want to fix it without changing current structure and using by css – jijith Jun 04 '14 at 06:11
The second image is only an example, that shows the real size of the croped image. – Barnee Jun 04 '14 at 06:13
i want make this without give height [link](http://www.goozga.com/demo/) check the 950x60, but the 60px may vary – jijith Jun 04 '14 at 06:18

score 0 · Answer 3 · answered Jun 04 '14 at 06:16

You can set the image to the background image of the div and make it work

CSS:-

div {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    width:100px;
    height:100px;

}

HTML:-

<div>
</div>

You can adjust the div's dimensions by changing width and height properties in css. Here is the working demo http://jsfiddle.net/44EwH/1/

Note:- The sample image used here has dimension 756 x 500.

score 0 · Answer 4 · answered Jun 04 '14 at 06:32

You can also try this solution, with below example you can manage image width related to parent div.

Image will automatically adept width of parent element.

HTML:

<div class="container">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />
</div>
<br/>
<br/>
<br/>
<img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />

CSS:

.container {
    width: 150px;
    border: 3px solid green;
    margin: 10px;
    position:relative;
    float:left;
}
.container img {
   width:100%;
   max-width:100%;
    float:left;
}

By doing this, you will no-longer required to align image in center of the dive, image will fit inside the DIV element.

score 0 · Answer 5 · answered Jun 04 '14 at 09:28

Use this

HTML

<div class="main-container">
    <div class="outer-block">
        <div class="inner-block">
            <img src="abc.jpg">
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

.main-container{
    display:block;
    width:950px;
    height:600px;
    overflow:hidden;
}
.outer-block {
    float: right;
    right: 50%;
    position: relative;
}
.inner-block {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

Need to cutoff img left and right

5 Answers5