How to center a rectangular image on a square div

Asked

Viewed 3,461 times

3

When I try to place a rectangular image inside a square div the image is cropped evenly, because it cuts only one side. When I mean centering the image I mean distributing the image equally to both sides and cutting equal pieces of the image to form the compound square with the image.

For example, I have a 300 x 200 image and a 200 x 200 div, if I put the image link inside the div it will cut 100px from a single side, instead I want you to cut 50px from each side of the image. It would be something like playing a video in 16:9 format on a 4:3 fullscreen monitor.

javascript image

4 answers

5


This is easier to do if you know the exact measurements of the image, so you can calculate the leftover, divide and put as negative margin, but using a percentage also works relatively well:

CSS

.divcontainer {
    overflow:hidden;
    width: 200px;
    height: 200px;
}

.divcontainer img {
    height:200px;
    margin-left:-33%;
}

HTML

<div class="divcontainer">
<img src="http://1000uglypeople.com/wp-content/uploads/Eyebrow-Guy-Fugly-Guys-Around-The-World.jpg" />
</div>

Another way that occurred to me now, is putting the image as background in the div, with the advantage of centralization being automatic:

CSS

.divimagem {
    background-size: auto 200px;
    background-position:center;
    width: 200px;
    height: 200px;
}

HTML

<div class="divimagem" style="background-image:url(http://1000uglypeople.com/wp-content/uploads/Eyebrow-Guy-Fugly-Guys-Around-The-World.jpg)">&nbsp;</div>

(I passed the image in the style of the element, so you can do it dynamically by php, without having to put it in the css file)

3

You can give a display: table-cell in div container. Hence only use alignment properties text-align: center and vertical-align: middle and run for it.

If the display as table cell is inconvenient, you can use another external div with a more suitable display.

Fiddle: http://jsfiddle.net/5bQRh/

1

you can use "text-align: center" CSS attribute as: <div style="text-align: center"> or in javascript: mydiv.style.textAlign = "center";

0

If I wanted to use only Javascript, CSS and HTML, I would do so:

Javascript:

<script type="text/javascript">
    var img = new Image();
    img.onload = function(){
        var height = img.height;
        var width = img.width;
        img.style["height"] = height;
        img.style["width"] = width;
    }
    img.src = "teste.png";
</script>

CSS:

<style type="text/css">
    div {
        display:block;
        height:200px;
        width:200px;
        overflow:hidden;
    }
    div img {
        display:block;
        margin:-50%;
    }
</style>

HTML:

<div><img src="teste.png" alt="" /></div>

With PHP and CSS, it would look like this:

<?php list($width, $height, $type, $attr) = getimagesize("teste.png"); ?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            display:block;
            height:200px;
            width:200px;
            overflow:hidden;
            margin:auto;
        }
        div img {
            display:block;
            height:<?php echo $height; ?>;
            width:<?php echo $width; ?>;
            margin:-50%;
        }
    </style>
</head>
<body>

<div><img src="teste.png" alt="" /></div>

</body>
</html>

Browser other questions tagged javascript image

You are not signed in. Login or sign up in order to post.