Cut pixels from the image without distorting it

Question

Cut pixels from the image without distorting it

Navigation

#1 by (4 votes)

2

Good morning!

I want to cut the sides of a photo without distorting it, is it possible?

For example, I have this image here:

<img src="https://i.stack.imgur.com/4oeoT.jpg"name="Foto Teste" alt="Foto Teste"/>

She has 1200x1200

I wanted to take, let's suppose, 400px from the sides (200 on each side), or, I want it to be 800 x 1200

But, I do not want to distort image or decrease, I want to keep the same thing without 200px on each side. Is this possible?

Illustration:

.imagem
{
    width: 400px;
    height: 400px;
    background: red;
    border: 2px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imagem-menor 
{
    background: #95d6e0;
    width: 300px;
    height: 400px; 
}

<div class="imagem">
    <div class="imagem-menor"></div>
</div>

In this case, the red part is the one I want to remove, the middle one leave, but without distorting anything.

html css

asked by anonymous 02.08.2018 / 16:23

1 answer

How to set menu with fadeIn effect? DataFrame Pandas - Calculate column based on other

score 4 · Accepted Answer

Option 1

Yes it is possible you can use the image as a background of a div that has the size you want. With the style background-position you define the position of your background inside the div in case it is centered horizontally and vertically to leave the woman in the middle and cut the sides equally

See the example. I did as you suggested, 800x1200

.imagem {
    background-image: url(https://i.stack.imgur.com/4oeoT.jpg);
    background-position: center;
    background-size: cover;
    width: 800px;
    height: 1200px;
}

<div class="imagem"></div>

Option 2

Another option would be to put the object-fit: cover style in the image, so it behaves like a background within the size that you set in the img tag But that's not totally crossbrowser check here to see the support link (in IE does not work)

See the example to better understand.

.imagem {
    width: 800px;
    height: 1200px;
    object-fit: cover;
}

<img class="imagem" src="https://i.stack.imgur.com/4oeoT.jpg"alt="">

Option 3

You can put the image inside a div with overflow:hidden and use transform:translateX to set it inside the container in the desired position.

See the example. Here I decrease the size proportionally so you see that it does not deform. I left some comments in the code read.

.imagem {
    width: 400px;
    height: 600px;
    overflow: hidden; /* esconde as laterais sobrando da imagem */
}
.imagem img {
    transform: translateX(-14%); /* ajusta a imagem na horizontal na posição que vc quiser*/
    height: 100%; /* deixa a imagem sempre com a altura correta */
}

<div class="imagem">
    <img src="https://i.stack.imgur.com/4oeoT.jpg"alt="">
</div>

TIP: Although you do not see what has been "cut" these sides that are hidden are part of the image file, then the weight of the image remains the same, and at the time of the request file size will remain the same. Consider handling these images before using them on the site ...