Resize image and add white space to exact size

Asked

Viewed 223 times

0

I need to know how I can make the images in wordpress instead of doing hard-Crop or resize simple in the image scale, Stay the image of the size I want and if the image does not have the same scale of the desired result as the script/plugin does not collapse or cut the image.

Something like this:

inserir a descrição da imagem aqui

wordpress

1 answer

1

With CSS is possible:

CSS:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo pt.stackoverflow - Pergunta 10483</title>
    <style>
    .quadroImagem {
        display:inline-block; 
        margin: 0;
        padding: 0;
        width: 200px;
        height: 200px;
        text-align: center; 
        background-color: #FFF;
        border: 1px solid #999;        
        line-height: 196px;
    }
    .quadroImagem img {
        max-height: 200px;
        max-width: 200px;
        vertical-align:middle;
    }
    </style>
</head>
<body>

    <div class="quadroImagem">
        <img src="minha_imagem.jpg" />
    </div>

</body>
</html>

Remembering that when changing the default size (in the example, 200px) the value of line-height should always be 4px smaller, i.e.:

To 400x400, line-height: 396px; To 100x100, line-height: 96px;

The line-height is used to allow vertical centering indicated in the image itself with vertical-align: Middle;

Test and see. Use rectangular square images (with height greater than width and vice versa).

Browser other questions tagged wordpress

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