How to center a rectangular image in a square div

Navigation
3

When I try to place a rectangular image inside a square div, the image is trimmed evenly, as it cuts only one side. When I mean to center the image I mean distribute the image equally to both sides and cut equal pieces of the image to form the square made up of the image.

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

    
asked by anonymous 02.08.2014 / 20:57

4 answers

5

This is easier to do if you know the exact measurements of the image, so you can calculate the left, divide and put as negative margins, 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>

AnotherwayIcameupwithitnowistoplacetheimageasthebackgroundinthediv,withtheadvantageofcentralizationbeingautomatic:

CSS

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

HTML

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

(I have passed the image in the style of the element, therefore it can be done dynamically by php, without having to put in the css file)

    
02.08.2014 / 21:33
3

You can give display: table-cell in the container div. Then just use the alignment properties text-align: center and vertical-align: middle and run for embrace.

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

Fiddle: link

    
02.08.2014 / 21:34
1

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

    
02.08.2014 / 21:25
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>
    
03.08.2014 / 17:23
Resize images using Bootstrap Return the previous page with the back button