3

Quando eu tento colocar uma imagem retangular dentro de uma div quadrada a imagem fica recortada de forma uniforme, pois corta apenas um dos lados. Quando eu me refiro centralizar a imagem quero dizer distribuir a imagem igualmente para ambos lados e que seja cortado pedaços iguais da imagem para forma o quadrado composto com a imagem.

Por exemplo, tenho uma imagem de 300 x 200 e uma div de 200 x 200, se eu colocar o link da imagem dentro da div ela vai cortar 100px de um único lado, em vez disso quero que corte 50px de cada lado da imagem. Seria algo como exibir uma vídeo no formato 16:9 em um monitor 4:3 em fullscreen.

4 Respostas 4

5

Isso é mais fácil de fazer se você conhece as medidas exatas da imagem, então pode-se calcular a sobra, dividir e colocar como margem negativa, mas usando uma porcentagem também funciona relativamente bem:

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>

Outra forma que me ocorreu agora, é colocando a imagem como background no div, com a vantagem da centralização ser automática:

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>

(passei a imagem no style do elemento, pois assim dá para fazer dinamicamente pelo php, sem precisar colocar no arquivo css)

3

Você pode dar um display: table-cell na div contenedora. Daí é só usar as propriedades de alinhamento text-align: center e vertical-align: middle e correr pro abraço.

Se o display como célula de tabela for inconveniente, você pode usar outra div externa com um display mais adequado.

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

1

você pode usar "text-align: center" CSS atributo como: <div style="text-align: center"> ou no javascript: mydiv.style.textAlign = "center";

0

Se eu quisesse utilizar apenas Javascript, CSS e HTML, eu faria assim:

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>

Com PHP e CSS, seria assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .